获取元素通常使用的两种方式：
1.利用DOM提供的方法获取元素
document.getElementByid()
document.getElementsByTagName()
document.querySelector() 等
逻辑性不强，繁琐。
2.利用节点层级关系获取元素
利用父子兄弟节点关系获取元素
逻辑性强，但是兼容性稍差
节点概述
网页中的所有内容都是节点(标签，属性，文本，注释等)，在DOM中节点使用node来表示。
HTML DOM树中的所有节点均可通过js进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
一般的，节点至少拥有node Type(节点类型)，node Name(节点名称)和node Value(节点值)这三个基本属性。
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3 (文本节点包括文字，空格，换行等)
在开发中，节点操作主要操作的是元素节点。
节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1.父级节点
node.parentNode
<div class = "box">
<span class = "erw"></span>
</div>
var erw = document.querySelector('.erw');
erw.panentNode;
得到的是离元素最近的父级节点，如果找不到父节点就返回null
子节点
1. parentNode.childNodes (标准)
返回包含指定节点的子节点的集合，这个集合是即时更新的集合
子节点chileNode所有的子节点包含元素节点，文本节点等
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等
如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes
var ul = document.querySelector('ul'); for(var i = 0; i < ul.childNodes.length; i++){ if(ul.childNodes[i].nodeType == 1){ // ul.childNodes[i]是元素节点 console.log(ul.childNodes[i]); } }
2. parentNode.children (非标准)
这是一个只读属性，返回所以的子元素节点。它只返回子元素节点，其余子节点不返回。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。
子节点
1. parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null，同样也是包含所有的节点。
2. parentNode.lastChild
lastChild返回最后一个子节点，找不到则返回null，同样也是包含所有的节点。
3. parentNode.firstElementChild
firstElementChild 返回的是第一个子元素节点，找不到返回null
4. parentNode.lastElementChild
lastElementChild 返回的是最后一个子元素节点，找不到则返回null
记住1，2是所有的节点，如换行，空格，文字。如果第一个或最后一个子节点是空格或换行，返回的就是空格或换行。3，4直接返回的是第一个或最后一个子元素节点，是元素，不包含其他的节点。
1. <ul><li>ab</li> <li>ab</li> <li>ab</li></ul> var ul = document.querySelector('ul'); var num = ul.firstChild; console.log(num); num.onclick = function(){ num.style.backgroundColor = 'pink'; } 2. <ul> <li>ab</li> <li>ab</li> <li>ab</li> </ul> // HTML的不同，结果会不一样。 var ul = document.querySelector('ul'); var num = ul.firstChild; console.log(num); num.onclick = function(){ num.style.backgroundColor = 'pink'; }
1. <ul><li>ab</li> <li>ab</li> <li>ab</li></ul> var ul = document.querySelector('ul'); var num = ul.firstElementChild; console.log(num); num.onclick = function(){ num.style.backgroundColor = 'pink'; } 2. <ul> <li>ab</li> <li>ab</li> <li>ab</li> </ul> var ul = document.querySelector('ul'); var num = ul.firstElementChild; console.log(num); num.onclick = function(){ num.style.backgroundColor = 'pink'; }
注意 ：这两个方法有兼容性问题，IE9以上才支持 3，4有兼容。
在开发当中，firstChild和lastChild包含其他节点，操作不方便，而firstElementChild和lastElementChild有兼容性，那么如何获取第一个或最后一个子元素节点呢？
解决方案：
如果想要第一个子元素节点，可以使用parentNode.children[0]
如果想要最后一个子元素节点，可以使用parentNode.children[长度-1]
console.log(ul.children[ul.children.length-1]);
兄弟节点
1. node.nextSibling
nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null，同样也是包含所以的节点。
2. node.previousSibling
previousSibling 返回当前元素上一个兄弟节点，找不到则返回null，同样包含所有的节点。
3. node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
4. node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null
3，4两个有兼容性问题，IE9以上才支持
如何解决兼容性问题：
// 自己封装一个兼容性的函数 function getNextElementSibling(element){ var el = element; while(el = el.nextSibling){ if(el.nodeType === 1){ return el; } } return null; }
创建节点
document.createElement('tagName')
document.createElement()方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点
node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表表尾，类似于css中的after伪元素。
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> // 1. 创建节点 元素节点 var li = document.createElement('li'); // 2. 添加节点 node.appendChild(child) node父级 child子级 var ul = document.querySelector('ul'); ul.appendChild(li); li.innerHTML = 'asd';
2. node.insertBefore(child,指定元素)
node.insertBefore()方法 将一个节点添加到父节点的指定子节点前面，类似css中的before伪元素。
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> // 1. 创建节点 var li = document.createElement('li'); // 2. 添加节点 var ul = document.querySelector('ul'); ul.insertBefore(li,ul.children[1]); li.innerHTML = 'fgh';
ul.insertBefore(li,ul.children[1])；是将创建好的元素添加到ul的子节点中的第二个元素前面，[1]是索引号，如果想添加到第一个的前面就将1改为0，因为第一个元素的索引号是0
注意：只有先创建了节点后，才能进行添加节点。
删除节点
node.removeChild(child)
node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
<button>删除</button> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> // 1.获取元素 var ul = document.querySelector('ul'); var but = document.querySelector('button'); // 点击按钮依次删除里面的孩子 but.onclick = function(){ if(ul.children.length == 0){ this.disabled = true; } else { ul.removeChild(ul.children[0]); } }
复制节点
node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本，也可称为克隆节点/拷贝节点
<ul> <li style="background-color: blue;">1</li> <li style="background-color: blueviolet;">2</li> <li style="background-color: brown;">3</li> </ul> var ul = document.querySelector('ul'); // 复制节点 根据索引号进行复制 var li = ul.children[1].cloneNode(true); // 添加节点 ul.appendChild(li);
注意：如果括号参数为空或false，则是浅拷贝，即克隆复制节点本事，不克隆里面的子节点
1. node.cloneNode(); 括号里内容为空或false，浅拷贝，只复制标签不复制内容。
2. node.cloneNode(true); 括号为true 深拷贝，复制标签，复制里面的内容。
