1 - 概念
网页中的所有内容都是节点（标签、属性、文本、注释），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JS进行访问，所有HTML元素（节点）均可被修改，也可以创建或者删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要的操作对象是元素节点
2 - 节点层级
利用DOM树可以把节点划分为不同层级关系，常见的是父子、兄弟层级关系。
3 - 父级节点
node.parentNode
parentNode属性可以返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null
×
4 - 子节点
（1）所有子节点
parentNode.childNodes (标准)
patrentNode.childNodes 返回指定节点的子节点的集合，该集合为即时更新的集合。
注意： 返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes。
（2）子元素节点
parentNode.children (非标准)
- parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点）
- 虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用。
- 我是li
- 我是li
- 我是li
- 我是li
（3）第一个子节点
parentNode.firstChild
- firstChild 返回的第一个子节点，找不到则返回null。同样，也是包含所有的节点。
（4）最后一个子节点
parentNode.lastChild
- lastChild 返回最后一个子节点，找不到则返回null。同样也是包含所有的节点。
（5）第一个元素节点（兼容性问题）
parentNode.firstElementChild
- firstElementChild 返回第一个子元素节点，找不到则返回null
（6）最后一个子元素节点 （兼容性问题）
parentNode.lastElementChild
- lastElementChild 返回最后一个子元素节点，找不到则返回null。
《！！！！！！！！！！ 注意兼容性问题 5、6 IE9以上才支持 ！！！！！！！！！》
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：
1、如果想要第一个子元素节点，可以使用parentNode.children[0]
2、如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length - 1]
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
5 - 兄弟节点
（1）下一个兄弟节点
node.nextSibling
nextSilling 返回当前元素的下一个兄弟节点，找不到则返回null。
（2）上一个兄弟节点
node.previousSibling
previousSibling 返回当前元素上一个兄弟节点，占不到则返回null
我是div
我是span
（3）下一个兄弟元素节点（有兼容性问题）IE9
node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
（4）上一个兄弟元素节点（有兼容性问题）IE9
node.previousElementSibling
previousElementSibling 返回当前元素上一兄弟节点，找不到则 返回null。
怎么解决兼容性问题呢？？
-- 自己封装一个兼容性函数（方法）
function getNextElementSibling（element）{
var el = element; //定义一个变量el接收传进来的element元素
while(el = el.nextSibling){ //存在下一个兄弟节点则继续
if(el.nodeType === 1) //前文说到 如果是element则返回 1 所以判断nodeType返回值是否 === 1
return el;
}
return null;
}6 - 创建节点
document.creatElement('tagName/elementName');
document.creatElement() 方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
7 - 添加节点
（1）node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的字节点列表末尾。类似于CSS里面的after伪元素。
（2）node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于CSS里面的before伪元素
- 123
8 - 留言板
1、创建一个textarea button ul
2、在textarea里面输入内容，点击按钮，实现将内容添加到 ul 里面（需要创建并添加一个li）
3、新的留言在前面显示用insertBefore，在后面显示就用appendChild