JS-DOM— —节点操作

五、节点操作

5.1、节点操作的作用

获取元素通常使用两种方式:

1.利用DOM提供的方法获取元素

● document.getElementByld()

● document.getElementsByTagName0

● document.querySelector

…

● 逻辑性不强、繁琐、结点操作的作用

2.利用节点层级关系获取元素

● 利用父子兄节点关系获取元素。

● 逻辑性强,但是兼容性稍差。

这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单

5.2、节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等) ,在DOM中,节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元索(节点)均可被修改,也可以创建或删除。

一般地， 节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。

● 元素节点nodeType为1

● 属性节点nodeType为2

● 文本节点nodeType为3 (文本节点包含文字、空格、换行等)

在实际开发中,节点操作主要操作的是元素节点

5.3、节点层级

利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。

（1）、父节点

node.parentNode（div.parentNode）

● parentNode 属性可返回某节点的父节点,注意是最近的一个父节点。

● 如果指定的节点没有父节点则返回null 。

（2）、子节点

1.标准流

parentNode .childNodes (标准ul. childNodes)

parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。

注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。

如果只想要获得里面的元素节点,则需要专门处理。所以一般不提倡使用childNodes

var ul = document.querySelector ('ul' ) ;

for(var i = 0; i < ul.childNodes.length;i++) {

if (ul.childNodes[i].nodeType = 1) {

// ul.childNodes[i] 是元素节点

console.log (ul.childNodes[i]);

}

2.非标准

parentNode . children (非标准ul. children)

parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元索节点,其余节点不返回(这个是我们重点掌握的)。

虽然children是一个非标准,但是得到了各个浏览器的支持，因此可以放心使用

3.找首尾子节点

parentNode.firstChild//（首尾所有节点）

firstChild //返回第一个子节点 ,找不到则返回null.同样，也是包含**所有的节点****（****包括元素节点,文本节点等****）**。

parentNode.lastChild

lastChild //返回最后一个子节点,找不到则返回null，也是包含**所有的节点****（****包括元素节点,文本节点等****）**。

parentNode.firstElementChild//（首尾元素节点）

firstElementchild  //返回第一个子元素节点,找不到则返回null.

parentNode.lastElementChild

lastElementChild //返回最后一个子元素节点,找不到则返回null.

注意:这两个方法有兼容性问题, IE9以上才支持。

实际开发中, firstchild和lastchild 包含其他节点,操作不方便，而firstElementchild和

lastElementChild又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

解决方案（实际开发常用）:

如果想要第一个子元素节点,可以使用parentNode. chilren[0]****。

例如：

ol.children[0]; 
ol.children[ol.children.length-1];

（3）兄弟节点

1.标准流

node.nextSibling

nextsibling 返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点（包括元素节点,文本节点等）。

node.previoussibling

previoussibling返回当前元素上一个兄弟节点,找不到则返回null。同样,也是包含**所有（包括元素节点,文本节点等）**的节点

2.非标准

node.nextElementSibling

nextElementsibling返回当前元素下一个兄弟元素节点,找不到则返回null。

node.previousElementsibl ing

previousElementsibl ing返回当前元素上一个兄弟元素节点,找不到则返回null,

注意:这两个方法有兼容性问题，IE9 以上才支持。

3.解决兼容性问题

自己封装一个兼容性的函数

5.4、创建节点

document . createElement ( 'tagName ')

document. createElement()方法创建由tagName 指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

5.5、添加节点

node.appendchild(child) //（node父级 child是子级）

node.appendchild() //方法将一个节点添加到指定父节点的**子节点**列表**末尾**。类似于css里面的after伪元素。

node.insertBefore(child,指定元素)

node.insertBefore() //方法将一个节点添加到父节点的指定子**节点**前面。类似于Css里面的before伪元素。

5.6、删除节点

node.removeChild (child)

node.removechild()//方法从DOM中删除一个子节点 ,返回删除的节点。

5.7、复制节点（克隆节点）

node.cloneNode()

node.cloneNode()//方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点。

注意:

1.如果括号参数为空或者为false , 则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。

2.如果括号参数为true, 则是深拷贝,即克隆复制节点本身,也克隆里面的子节点。

5.8、三种动态创建元素的区别

● document . write()

● element . innerHTML

● document . createElement ()

区别：

1. document .write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘 。

2. innerHTML 是将内容写入某个DOM节点,不会导致页面全部重绘。

3. innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接) , 结构稍微复杂。

4. createElement() 创建多个元素效率稍低一点点,但是结构更清晰。

总结:不同浏览器下, innerHTML效率要比creatElement 高