1. DOM概念
DOM（Document Object Model）文档对象模型。
DOM是关于创建，插入，修改，删除页面元素的标准，赋予了我们操作页面的能力。
页面上的内容本质上都是字符串，但是JS把这些字符串解析成了DOM树，DOM树中的内容会被解析成DOM节点。也就是说，我们在操作DOM的本质就是在操作DOM中的每一个节点。页面中的任何内容都是节点。
2. 节点
2.1 childNodes
childNodes 返回元素下的第一层所有子节点的集合，包含回车，文字，注释。
语法：
元素.childNodes
每一个节点都会有一个对应的下标，它还有一个length属性，代表子节点的个数。
<div id="box" class="clBox" style="background: #f00;">
<p></p>
kaivon
<!--这里是注释-->
</div>
var box=document.getElementById("box");
var child=box.childNodes;
console.log(child); //返回元素中所有的节点
2.2 nodeType
nodeType 返回节点的类型，这个节点类型是一个数字。
语法：
节点.nodeType
节点的类型如下： （括号里为返回值）
| 节点类型 | 节点描述 | 节点返回值 |
|---|---|---|
| Node.ELEMENT_NODE | 元素节点 | 1 |
| Node.ATTRIBUTE_NODE | 属性节点 | 2 |
| Node.TEXT_NODE | 文本节点 | 3 |
| Node.CDATA_SECTION_NODE | XMLCDMA片段节点 | 4 |
| Node.ENTITY_REFERENCE_NODE | 实体引用 | 5 |
| Node.ENTITY_NODE | 实体 | 6 |
| Node.PROCESSING_INSTRUCTION_NODE | 处理指令 | 7 |
| Node.COMMENT_NODE | 注释 | 8 |
| Node.DOCUMENT_NODE | 文档 | 9 |
| Node.DOCUMENT_TYPE_NODE | 文档实体接口 | 10 |
| Node.DOCUMENT_FRAGMENT_NODE | 轻量级文档对象 | 11 |
| Node.NOTATION_NODE | DTD中声明的符号 | 12 |
console.log(box.nodeType); //1 标签
2.3 nodeName
nodeName 返回节点的名字。
语法：
节点.nodeName
console.log(box.nodeName); //DIV 返回的节点名字大小写根据浏览器不同会出现不同。
2.4 attributes
attributes 返回元素所有属性的集合。 每一个元素都有一个对应的下标，它还有一个length属性，代表属性的个数。
语法：
元素.attributes
var attr=box.attributes;
console.log(attr);
//元素节点
console.log(box.nodeType); //1 标签
console.log(box.nodeName); //DIV
//属性节点
console.log(attr[0].nodeType); //2 属性
console.log(attr[0].nodeName); //id id
//文本节点
console.log(child[0].nodeType); //3 文本
console.log(child[0].nodeName); //#text
//注释节点
console.log(child[3].nodeType); //8 注释
console.log(child[3].nodeName); //#comment
//文档节点
console.log(document.nodeType); //9 文档
console.log(document.nodeName); //#document
3. tagName
tagName 返回元素的标签名。
语法：
元素.tagName
只有标签元素才有这个属性。
要与nodeName区分开来，区别：
tagName只有标签名才有这个属性，nodeName是任何节点都有这个属性。
console.log(document.body.tagName) //BODY
console.log(document.body.nodeName) //BODY
console.log(document.body.childNodes[0].nodeName) //#text
console.log(document.body.childNodes[0].tagName) //undefined
4. 获取父节点
parentNode返回这个节点的父节点。 不能操作属性节点（使用属性节点无法获取父节点）
语法：
节点.parentNode
<div id="box" class="clBox" >
aaaaa
<span id="sp" class="clBox" ></span>
</div>
<script>
var box=document.getElementById("box");
var sp=document.getElementById("sp");
var attrs1=sp.attributes[0];
var attrs=box.attributes[0];
console.log(box.childNodes[0].parentNode);
console.log(attrs.parentNode); //null
console.log(attrs1.parentNode); //null
</script>
5. 获取子节点
5.1 childNode
childNodes 返回元素下的第一层所有子节点的集合，包含回车，文字，注释。
语法：
元素.childNodes
每一个节点都会有一个对应的下标，它还有一个length属性，代表子节点的个数。
5.2 children
children 返回元素下的第一层所有子节点的集合，但是只包含标签元素。
它同样是一个类数字，拥有length属性，返回的节点都有一个对应的下标。
语法：
元素.children
这个属性返回的结果都是标签，但是他是非标准的
5.3 firstElementChild
firstElementChild 返回这个元素（父节点）下的第一个子节点，如果没有，则返回null
语法：
元素.firstElementChild
5.4 lastElementChild
lastElementChild 返回这个元素（父元素）下的最后一个子节点，如果没有，则返回null
语法：
元素.lastElementChild
6.获取兄弟节点
previousElementSibling
previousElementSibling 返回这个节点的上一个兄弟节点，如果没有，返回一个null
语法：
节点.previousElementSibling
nextElementSibling
nextElementSibling 返回下一个兄弟节点，如果没有，那么会返回一个null
语法：
节点.nextElementSibling
属性节点没有兄弟节点。
