JavaScript--DOM操作（二）
一、DOM节点操作
概述：
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
元素节点 nodeType 为 1
属性节点 nodeType 为 2
-
一、节点层级（父子兄）
一、父级节点
node.parentNode//返回某节点的父节点（最近的一个父节点）<div class="box"> <span class="zxw">x</span> </div> var zxw = document.querySelector('.zxw'); console.log(zxw.parentNode); 最后输出的值为： <div class="box"> <span class="zxw">x</span> </div>二、子节点
parentNode.childNodes//返回包含指定节点的子节点的集合，该集合为即时更新的集合eg: var ul = document.querySelector('ul')
console.log(ul.childNodes);//所有的子节点，包含 元素节点 文本节点
- 如果只想要获取里面的元素节点，可以加一个判定条件：
if(ul.childNodes[i].nodeType == 1)//元素节点 nodeType 为 1
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes
:::info
parentNode.children//是一个只读属性，返回所有的子元素节点，只返回子元素节点，其余节点不返回
:::parentNode.firstChild//返回第一个子节点（包含所有节点）parentNode.lastChild//返回最后一个节点（包含所有的节点）parentNode.firstElementChild//返回第一个子元素节点（只返回子元素节点）parentNode.lastElementChild//返回最后一个子元素节点（只返回子元素节点）
注意：
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节 点呢？
解决方案：
如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
三、兄弟节点
node.nextSibling//返回当前元素的下一个兄弟节点（包含所有节点）node.previousSibling//返回当前元素的上一个兄弟节点（包含所有节点）node.nextElementSibling//返回当前元素的下一个兄弟元素节点（只返回兄弟元素节点）node.previousElementSibling//返回当前元素的上一个兄弟元素节点（只返回兄弟元素节点）四、创建节点
document.createElement('tagName')
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
五、添加节点
node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾，类似于css中的after伪元素
node.insertBefore(child, 指定元素)
将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>
</body> 六、删除节点
node.removeChild(child)//从DOM中删除一个子节点，返回删除的节点var ul = document.querySelector('ul'); ul.removeChild(ul.children[0]);七、复制(克隆)节点
node.cloneNode()//返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
注意：
- 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
- 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
前端基础知识点
投递七牛云等公司7个岗位 >