1、节点概述

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

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

• 元素节点 nodeType 为 1
• 属性节点 nodeType 为 2
• 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）
• 在实际开发者，节点操作主要操作的是元素节点

2、节点层级

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

3、父级节点

node.parentNode

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

我是div
我是span
我是li
我是li
我是li
我是li
×

4、子节点

4.1、所有子节点

parentNode.childrenNodes （标准）

parentNode.childrenNodes 返回包含指定节点的子节点的集合，该集合为及时更新的集合。

注意：

• 返回值里面包含了所有的子节点，包括元素节点、文本节点等。
• 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

4.2、子元素节点

 parentNodes.children （非标准）

        parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点掌握） 。虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用。

我是div
我是span
我是li
我是li
我是li
我是li
我是li
我是li
我是li
我是li
×

4.3、其他方法

        实际开发中，firstChild和lastChild包含其他节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？ 

解决方案：

• 如果想要第一个子元素节点，可以使用parentNode.children[0]
• 如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length - 1]

我是li1
我是li2
我是li3
我是li4
我是li5

5、案例：新浪下拉菜单

案例分析：

• 导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
• 核心原理：当鼠标经过li里面的，第二个孩子ul显示，当鼠标离开，则ul隐藏 

微博
私信
评论
@我
微博
私信
评论
@我
微博
私信
评论
@我
微博
私信
评论
@我

6、兄弟节点

注意：后面两个方法有兼容性问题，IE9以上才支持

解决兼容性问题，可以封装一个函数

   function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;} 

我是div
我是span

7、创建与添加节点

123

8、案例：简单版发布留言

案例分析： 

• 核心思路：点击按钮之后，就动态创建一个li，添加到ul里面
• 创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
• 如果想要新的留言后面显示就用 appendChild如果想要前面显示就用insertBefore

发布

9、删除节点

删除
熊大
熊二
光头强

10、案例：删除留言

案例分析： 

1. 当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接
2. 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
3. 阻止链接跳转需要添加JavaScript:void(0);或者 javascript:; 

发布

10、复制（克隆）节点

注意：

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

1111
2
3

11、案例：动态生成表格

案例分析：

1. 因为里面的学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式1存储
2. 所有的数据都是放在tbody里面的行里面
3. 因为行很多，我们需要循环创建多个行（对应多少个人） 
4. 每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
5. 最后一列单元格是删除，需要单独创建单元格
6. 最后添加删除操作，单击删除，可以删除当前行

姓名
科目
成绩
操作

12、创建元素的三种方式

• document.write()
• element.innerHTML
• document.createElement()

区别：

• document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
• innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
• innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
• createElement() 创建多个元素效率稍低一点点，但是结构更清晰

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

点击
abc

13、innerTHML和createElement效率对比

innerHTML字符串拼接方式（效率低）

createElement方式（效率一般）

innerHTML数组方式（效率高）