节点操作、节点层次、节点的创建、添加、删除、复制，简单版发布留言案例，删除留言案例，动态生成表格案例，三种动态创建元素区别

2.4为什么学节点操作

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

Snipaste_2020-06-25_11-53-56.png

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

2.4.1节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示。
一般地，节点至少拥有nodeType（节点类型）、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

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

2.4.2节点层次

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

Snipaste_2020-06-25_12-09-41.png

1、父级节点
node.parentNode

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

×

2、子节点
parentNode.childNodes (标准）
返回包含指定节点的子节点的集合，该集合为及时更新的集合
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理，所有我们一般不提倡使用childNodes。
parentNode.children(非标准）
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的，也是我们实际开发常用的）。（虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。）
parentNode.firstChild
返回第一个子节点，找不到则返回null。同样也是包含所有的节点
parentNode.lastChild
返回最后节点，找不到则返回null。同样也是包含所有的节点
parentNode.firstElementChild
返回第一个子元素节点
parentNode.lastElementChild
返回最后一个子元素节点
注意：.firstElementChild .lastElementChild这两个方法有兼容问题，IE9以上才支持。
实际开发的写法，既没有兼容性问题又返回第一个子元素以及最后一个元素
原因：children返回的是一个数组的集合

console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);

3、兄弟节点
node.nextSibling
返回当前元素的下一个兄弟节点，找不到返回null。同样也是包含所有节点。
node.previousSibling
返回当前元素的上一个兄弟节点，找不到则返回null。同样也是包含所有节点。
node.nextElementSibling
返回当前元素下一个兄弟元素节点，找不到则返回null
node.previousElementSibling
返回当前元素的上一个兄弟元素节点，找不到则返回null
同样nextElementSibling和previousElementSibling只支持ie9以上

###2.5下拉菜单的案例
![Snipaste_2020-06-25_13-03-55.png](https://upload-images.jianshu.io/upload_images/23083822-f3ae07d5e4c9e1a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
```css

2.4.3创建节点

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

2.4.4添加节点

node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。 node是父级，child是子级。
node.insertBefore(child,指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

2.6简单版发布留言案例

Snipaste_2020-06-25_16-41-54.png

2.4.5删除节点

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

2.7删除留言案例

Snipaste_2020-06-25_17-03-37.png

2.4.6复制节点（克隆节点）

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

2.4.7动态生成表格案例

Snipaste_2020-07-08_14-13-38.png

Snipaste_2020-07-08_15-03-31.png

2.4.8三种动态创建元素区别

document.write() 冷门，一般不怎么使用
element.innerHTML
document.createElement()

abc

区别
1、document.write 是直接将内容写入页面的内容流，但文档流执行完毕，则它会导致页面全部重绘。
2、innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3、innerTHML创建多个元素效率更高(不要拼接字符串，采用数组形式拼接），结构稍微复杂
4、creatElement（）创建多个元素效率稍微低一点点，但是结构更清晰。
总结：不管在什么浏览器下，innerHTML效率都要比creatElement高