07-JavaScript 节点操作

1.1 节点概述

网页中所有的内容都是节点（标签、属性、文本、注释等），在DOM中，节点用 node 来表示
HTML DOM树中的所有节点都可以通过JS进行访问，所有的节点都可以被修改、创建、删除

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

• 元素节点 nodeType 为 1
• 属性节点 nodeType 为 2
• 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

1.2 节点层级

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

1.父级节点

Node.parentNode

• parentNode
• 属性可返回某节点的父节点，是最近的一个父节点
• 如果指向的节点没有父节点则返回NULL

2.子节点

1. parentNode.childNodes （标准）

这里返回值里面包含了所有的子节点，包括元素节点、文本节点等，如换行等，所以一般不使用childNodes

2.  parentNode.children  （非标准）

parentNode.children是一个只读属性返回所有子元素节点，它只返回子元素节点，其余节点不返回，经常使用

3. parentNode.firstChild 

返回第一个子节点，同样包含所有节点

4. parentNode.lastChild

返回最后一个子节点，同样包含所有节点

5. parentNode.firstElementChild     （有兼容性问题，IE9以上支持）

返回第一个元素节点，找不到返回null

6. parentNode.lastElementChild      （有兼容性问题，IE9 以上支持）

返回最后一个元素节点，找不到返回 null

7. 实际开发中，使用 元素.children[索引] 

3. 兄弟节点

• node.nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null，其同样包含所有节点
• node.previousSibling 返回当前元素的上一个兄弟节点，找不到则返回null，其同样包含所有节点
• node.nextElementSibling 返回当前元素下一个兄弟元素节点，有兼容性问题，ie9 以上支持
• node.previousElementSibling 返回当前元素上一个兄弟元素节点，有兼容性问题，ie9 以上支持

1.4 创建节点 和 添加节点

创建节点
document.createElement(‘tagName’); 创建由tagName 指定的 HTML 元素，动态创建元素节点

添加节点

1. node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾
2. node.insertBefore(child, 指定元素) 将一个节点添加到父节点的指定子节点前面

1.5 删除节点

node.removeChild(child) 从DOM中删除一个子节点，返回删除的节点

1.6 复制节点

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

注：

1. 如果括号参数为空或者为false，是浅拷贝，即只赋值节点本身，不克隆里面的子节点
2. 如果括号里面的参数为true ，则是深拷贝，会复制节点本身以及里面所有的子节点

1.7 三种动态创建元素的区别

• document.write() 如果页面文档流加载完毕，再调用这句话会导致页面重绘，很少使用
• element.innerHTML 将内容写入某个DOM节点，不会导致页面全部重绘；创建多个元素效率更高（不要拼接字符串，要采取数组形式拼接），结构稍微复杂
• document.createElement() 创建多个元素效率稍微低一些，但结构清晰

总结：不同浏览器下，innerHTML 效率比 createElement() 高