节点概述
网页中的所有内容都是节点（标签，属性，文本，注释等），在DOM中节点使用node来表示,HTML DOM树中的所有的节点均可通过javascript进行访问，所有HTML元素节点均可被修改，创建，删除。
一般地，节点至少用
nodeType（节点类型），nodeName（节点名称）和nodeValue（节点值）这三个基本属性
常见的节点
Element元素节点nodeType为1
Attr属性节点nodeType为2
Text文本节点nodeType为3（文本节点包含文字，空格，换行等）
comment注释节点 节点类型是 8
documentFragment 文档片段节点 节点类型是 11
document文档节点 根节点 节点类型是9
我们在实际开发中，节点操作主要的是元素节点
节点层级
利用DOM树可以把节点划分不同的层级关系，常见的是父子兄层级关系
节点的关系包含两种：上下父子关系 相邻兄弟关系
在节点树中，最顶端的节点被称作为根节点 document
除了根节点之外，每一个节点都有自己的父节点
每一个节点都可以包含任何数量的子节点
叶子（属性）没子节点
同级的节点拥有同一个父节点
父级节点
- node.parentNode
parentNode属性可返回某节点的父节点，注意的是最近的一个父节点
如果指定的节点没有父节点则返回null
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima"></span>
</div>
</div>
//1.父节点parentNode
var erweima = document.querySelector('.erweima');
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
//得到的是离元素最近的父级节点（亲爸爸），如果找不到父节点就返回为null
console.log(erweima.parentNode);
子节点
parentNode.childNodes(标准)
parentNode.children(非标准)
-
parentNode.firstChild：回第一个子节点，找不到则返回null。同样，也是包含所有的节点。 -
parentNode.lastChild：返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。 -
parentNode.firstElementChild：返回第一个子元素节点，找不到则返回null -
parentNode.lastElementChild：返回最后一个子元素节点，找不到则返回null
注意：这两个方法有兼容性问题，IE9以上才支持
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima"></span>
</div>
</div>
//子节点childNodes得到所有的节点包含元素节点和文本节点
console.log(ul.childNodes);
//遍历ul中所有的子节点
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType == 1){
console.log(ul.childNodes[i]);
}
}
//children 获取所有的子元素节点
console.log(ul.children); //[li,li,li,li]
//firstChild 第一个节点 不管是文本节点还是元素节点
console.log(ul.firstChild);
console.log(ul.lastChild);
//返回第一个子元素节点
console.log(ul.firstElementChild);
//返回最后一个子元素节点
console.log(ul.lastElementChild);
/*
* 实际开发中，firstChild和lastChild包含其他节点，操作不方便
* 而firstElementChild和lastElementChild又有兼容性问题，那么我们
* 如何获取第一个子元素节点或最后一个子元素节点呢？
*
* 解决方案
* 实际开发的写法既没有兼容性问题又返回第一个子元素
* */
console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
兄弟节点
-
node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点 -
node.previousSibling：返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点 -
node.nextElementSibling：返回当前元素下一个兄弟元素的节点，找不到则返回null. -
node.previousSiling：返回当前元素上一个兄弟元素的节点，找不到则返回null.
注意： nextElementSibling和previousSiling这两个方法有兼容性问题，IE9以上才支持。
<div>我是div</div>
<span>我是span</span>
var div = document.querySelector('div');
console.log(div.nextSibling);
console.log(div.previousSibling);
console.log(div.nextElementSibling);
/*
* 自己封装一个兼容性的函数
* */
function getNextElementSibling(ele) {
var el = element;
while(el == el.nextSibling){
if(el.nodeType === 1){
return el;
}
}
return null;
}
删除节点
node.removeChild(child);方法从DOM中删除一个子节点，返回删除的节点
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>关头强</li>
</ul>
/*
*node.removeChild(child);方法从DOM中删除一个子节点，返回删除的节点
* */
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
console.log(ul.removeChild(ul.children[0]));
btn.onclick = function () {
if(ul.children.length == 0){
this.disabled = true;
}else {
ul.removeChild(ul.children[0]);
}
}
复制节点
node.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
注意：
1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点，不克隆里面的子节点
2.如果括号参数为true,则是深拷贝，会复制节点本身以及里面所有的子节点
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
var ul = document.querySelector('ul');
ul.appendChild(ul.children[0].cloneNode());
ul.appendChild(ul.children[0].cloneNode(true));
