JS：DOM节点操作
一，获取元素通常使用两种方法
使用节点操作更简单
二，节点概述
网页中的所有内容都是节点（标签，属性，文本，注释等）
在DOM中，节点用node表示
HTML DOM树中的所有节点均可通过js访问，所有HTML元素（节点）均可被修改，也可以创建或删除
三， 节点层级
1.获取父级节点
node.parentNode
得到的是离node元素最近的父级节点，如果找不到父节点返回 null。
//获取ewm的父元素
var box = ewm.parentNode;
2.获取子级节点
法一：parentNode.childNodes (标准)
得到的是parentNode（父节点）的所有子节点：
包括元素节点，文本节点（空格，换行等）等
法二：parentNode.children(非标准)
- parentNode.children是一个只读属性，返回所有的子元素节点，只返回子元素节点，其余节点不返回
- 虽然children是一个非标准，但它得到了各个浏览器的支持，可以放心使用，是实际开发中常用的
法三：返回指定的子节点
parentNode.firstChild （返回parentNode的第一个子节点）
parentNode.lastChild （返回parentNode的最后一个子节点）
···
这两个返回的节点中包括文本节点和元素节点
parentNode.firstElementChild (返回parentNode的第一个元素节点)
parentNode.lastElementChild （返回parentNode的最后一个元素节点 ）
···
这两个方法IE9以上才支持
实际开发中firstChild和lastChild包含其他节点，操作不方便
而firstElementChild和lastElementChild又有兼容性问题
所以需要获取指定子节点时可以采用法二的方法，既没有兼容性问题，返回的又是元素节点，一举两得：
parentNode.children[0] (返回parentNode的第一个元素节点)
parentNode.children[parentNode.children.length-1](返回parentNode的最后一个元素节点)
3.获取兄弟节点
node.nextSibling(返回node的下一个兄弟节点)
node.previousSibling(返回node的上一个兄弟节点)
…
这两个返回的节点中包括文本节点和元素节点
node.nextElementSibling (返回node的下一个兄弟元素节点)
node.previousElementSibling (返回node的上一个兄弟元素节点)
…
这两个方法IE9以上才支持
要解决返回兄弟元素节点的兼容性问题可以自己封装一个函数：
获取element的下一个兄弟元素节点的函数
//获取element的下一个兄弟元素节点的函数
function getNextElementSibling(element){
var el = element;
while(el=el.nextSibling){
if(el.nodeType===1){
return el;
}
}
return null;
}
获取element的上一个兄弟元素节点的函数
//获取element的上一个兄弟元素节点的函数
function getpreviousElementSibling(element){
var el = element;
while(el=el.previousSibling){
if(el.nodeType===1){
return el;
}
}
return null;
}
</script>
四， 创建和添加节点
在页面中添加一个新的元素需要两步：1.创建元素 2.添加元素
1.创建节点
document.createElement('tagName') (tagName为元素节点的名字)
如：document.createElement('li') （创建一个li标签）
2.添加节点
node.appendChild(child) 将一个节点添加到指定父节点node的子节点列表的末尾
node.insertBefore(child,指定元素) 将一个节点添加到指定父节点node中的指定元素的前面
…
node为父级，child是子级，添加child到node中
<div>
<li>123</li>
</div>
<script>
//1.创建节点元素节点
var li = document.createElement('li');
var lis = document.createElement('li');
//2.获取父元素
var div = document.querySelector('div');
//3.将创建的元素节点添加到父元素中
div.appendChild(li);//li加到了<li>123</li>后面
//div.children[0]为div中第一个元素节点，即<li>123</li>
div.insertBefore(lis, div.children[0]);
//lis加到了<li>123</li>前面
</script>
3.删除节点
node.removeChild(child) 在父节点node中删除子节点child，并返回删除的节点
如：ul.removeChild(ul.children[0]);删除ul中的第一个元素节点
.
注意：removeChild只能删除指定的一个节点
4.复制节点（克隆节点）
node.cloneNode() 该方法返回调用该方法的节点的一个副本，即克隆节点
.
注意：
- 克隆节点后要配合添加节点把克隆的副本添加上
- 如果括号内为空或false，则为浅拷贝，即只克隆复制节点本身，不克隆节点内的内容（子节点）
- 如果括号内true，则是深度拷贝，会复制节点本身以及里面所有的内容（子节点）
