初识DOM

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

属性节点没有兄弟节点。