js节点操作

js节点操作

利用DOM树可以把节点划分为不同的层级关系。

1. 父级节点

   node.parentNode 这个属性返回node节点最近的一个父节点

2. 子节点

   node.childNode 返回指定节点的所有子节点的集合

   !注意：包括文本节点甚至空格等都会被一起返回， 若只想获得子元素节点就别用了

​ 2.1 更推荐的方法

​ node.children只读属性，只返回所有子元素节点。

​ 2.2 返回某个特定的子节点

​ node.firstChild（Child是包含所有节点，文字等）

​ node.lastChild

​ node.firstElementChild（真正的子节点）

​ node.lastElementChild

3. 兄弟节点

   node.nextSibling

   node.previousSibling

   node.nextElementSibling

   node.previousElementSibling

4. 节点的创建

​ document.createElement(‘tagName’)根据需求动态创建元素节点，但是创建了还不会显示，还需要添加

5. 节点的添加

   node.appendChild(child)将一个节点添加到指定父节点的子节点列表末尾。类似css中的after伪元素

   node.insertChild(child)将一个节点添加到指定父节点的子节点前面。类似css中的before伪元素

6. 节点的删除

   node.removeChild()返回删除节点

7. 节点的赋值

   node.cloneNode()返回节点的副本 - 若无参数就是浅拷贝，不克隆里面的子节点；若参数为true，则是深度拷贝，会复制节点本身以及里面所有的节点。