元素节点 nodeType：1，属性节点 nodeType：2，文本节点 nodeType：3 （常使用元素节点）
1.父级节点
node.parentNode
parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null
2.子节点操作
方式1：childNodes 获取所有子节点 包含元素节点 文本节点 等等 不建议使用
方式2：children 获取所有子元素节点 也是实际开发中常用的
var ul = document.querySelector('ul');
console.log( ul.children )； // 输入ul下的所有 元素节点
3.子节点-第一个子元素和最后一个子元素
方式1：firstChild / lastChild 第一个 / 最后一个子节点 包含 元素节点、文本节点
方式2：firstElementChild / lastElementChild 返回第一个 / 最后一个子元素节点 ie9才支持
方式3：children[0] / children[ ol.children.length - 1 ] 实际开发的写法，既没有兼容性问题又返回第一个子元素
4.兄弟节点
方式1：node.nextSibling 返回当前元素的下一个兄弟节点，找不到返回null 包含所有节点
node.previousSibling 返回当前元素的上一个兄弟节点，找不到返回null 包含所有节点
方式2：node.nextElementSibling 返回当前元素的下一个兄弟元素节点 ，找不到返回null （有兼容性问题，IE9以上支持）
node.previousElementSibling 返回当前元素的上一个兄弟元素节点，找不到返回null
解决兼容性问题，可以封装一个函数
function getNextElementSibling(element){
var el = element;
while ( el = el.nextSibling ) {
if ( el.nodeType === 1 ) {
return el;
}
}
return null;
}
5.创建节点和添加节点
1. 动态创建元素节点
document.createElement('节点名称')
2. 添加节点
node.appendChild(child); node 父级 child 子级 在后面追加元素，类似数组中的push
node.insertBefore(child，指定元素); 在指定元素前面添加元素
var li = document .createElement('li');
ul.insertBefore( li,ul.children[0] ); 给 ul 的第一个子元素的前面添加 一个 li
6.删除节点
node.removeChild( child ) 方法从DOM中删除了一个子节点，返回删除的节点
7.复制节点（克隆节点）
node.cloneNode(); 括号为 空 或者里面是 false 浅拷贝 只复制标签不复制里面的内容
node.cloneNode(true); 括号为 true 深拷贝 复制标签 复制里面的内容