JavaScript学习笔记010-DOM节点的运用
JavaScript学习笔记010-DOM节点的运用
Mr. 柳上原
发布于 2018-09-05 15:21:20
发布于 2018-09-05 15:21:20
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
不常用的东西很快就找不到了
不常写的方法很快就忘记了
字符串和数组的方法
大家还记的几个
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div id="box">
<div id="b1"> // 属性节点
content // 文本节点
<!-- 注释 --> // 注释节点
</div>
<p></p>
</div>
<script>
/*
DOM：
Document Object Model
*/
const box = document.getElementById("box");
// childNodes兼容性：在低版本IE下只返回元素节点
console.log(box.childNodes); // box的所有子节点（包括注释，文本）
// children 返回元素节点
console.log(box.children); // box的所有子元素节点
// nodeType 返回节点类型：元素节点type值为1，文本节点type值为3
// nodeName 返回节点名字（大写）
console.log(box.children[0].nodeName.toLowerCase() === "div"); // box的第一个元素节点的名字
// tagName 返回元素节点名字（大写）
// getAttributeNode 返回元素的属性节点
console.log(box.getAttributeNode("id")); // box的id属性节点
// setAttributeNode 设置元素的属性节点
const cls = document.createAttribute("class"); // 创建class属性
box.setAttributeNode(cls); // 给box增加class属性
console.log(box);
// setAttribute 给元素设置属性
box.setAttribute("fengyu", "123");
console.log(box);
// getAttribute 获取元素属性的值
console.log(box.getAttribute("fengyu")); // box元素中fengyu属性的值
// removeAttribute 删除元素的属性
console.log(box.removeAttribute("fengyu")); // 删除box元素中的fengyu属性
// firstChild 等价于childNode[0]
// firstElementChild 返回第一个元素节点，只兼容主流浏览器
// lastChild 跟firstChild类似，返回最后一个元素节点
// lastElementChild 返回最后一个元素节点
// nextSibling 返回下一个兄弟节点
// nextElementSibling 返回下一个兄弟元素节点
// previousSibling 返回前一个兄弟节点
// previousElementSibling 返回前一个兄弟元素节点
// parentNode 返回父节点
// offsetParent 返回定位父级
// childElementCount 返回子元素节点个数
// 创建节点
document.createElement(" ");
box.appendChild(" ");
// removeChild 删除节点（只能删除子级）
// 创建节点片段（仓库）
const a = document.createDocumentFragment( );
box.appendChild(" ");
box.appendChild(" ");
box.appendChild(a); // 一次渲染多个对象
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.08.17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读