1. DOM概念
DOM（Document Object Model）文檔對象模型嚎京。
DOM是關于創(chuàng)建既穆，插入，修改起胰，刪除頁面元素的標準久又，賦予了我們操作頁面的能力。
頁面上的內容本質上都是字符串待错，但是JS把這些字符串解析成了DOM樹籽孙，DOM樹中的內容會被解析成DOM節(jié)點。也就是說火俄，我們在操作DOM的本質就是在操作DOM中的每一個節(jié)點犯建。頁面中的任何內容都是節(jié)點。
2. 節(jié)點
2.1 childNodes
childNodes 返回元素下的第一層所有子節(jié)點的集合瓜客，包含回車适瓦，文字，注釋谱仪。
語法：
元素.childNodes
每一個節(jié)點都會有一個對應的下標玻熙，它還有一個length屬性，代表子節(jié)點的個數(shù)疯攒。
<div id="box" class="clBox" style="background: #f00;">
<p></p>
kaivon
<!--這里是注釋-->
</div>
var box=document.getElementById("box");
var child=box.childNodes;
console.log(child); //返回元素中所有的節(jié)點
2.2 nodeType
nodeType 返回節(jié)點的類型嗦随，這個節(jié)點類型是一個數(shù)字。
語法：
節(jié)點.nodeType
節(jié)點的類型如下： （括號里為返回值）
| 節(jié)點類型 | 節(jié)點描述 | 節(jié)點返回值 |
|---|---|---|
| Node.ELEMENT_NODE | 元素節(jié)點 | 1 |
| Node.ATTRIBUTE_NODE | 屬性節(jié)點 | 2 |
| Node.TEXT_NODE | 文本節(jié)點 | 3 |
| Node.CDATA_SECTION_NODE | XMLCDMA片段節(jié)點 | 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 返回節(jié)點的名字敬尺。
語法：
節(jié)點.nodeName
console.log(box.nodeName); //DIV 返回的節(jié)點名字大小寫根據(jù)瀏覽器不同會出現(xiàn)不同枚尼。
2.4 attributes
attributes 返回元素所有屬性的集合贴浙。 每一個元素都有一個對應的下標，它還有一個length屬性署恍，代表屬性的個數(shù)崎溃。
語法：
元素.attributes
var attr=box.attributes;
console.log(attr);
//元素節(jié)點
console.log(box.nodeType); //1 標簽
console.log(box.nodeName); //DIV
//屬性節(jié)點
console.log(attr[0].nodeType); //2 屬性
console.log(attr[0].nodeName); //id id
//文本節(jié)點
console.log(child[0].nodeType); //3 文本
console.log(child[0].nodeName); //#text
//注釋節(jié)點
console.log(child[3].nodeType); //8 注釋
console.log(child[3].nodeName); //#comment
//文檔節(jié)點
console.log(document.nodeType); //9 文檔
console.log(document.nodeName); //#document
3. tagName
tagName 返回元素的標簽名。
語法：
元素.tagName
只有標簽元素才有這個屬性盯质。
要與nodeName區(qū)分開來袁串，區(qū)別：
tagName只有標簽名才有這個屬性，nodeName是任何節(jié)點都有這個屬性呼巷。
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. 獲取父節(jié)點
parentNode返回這個節(jié)點的父節(jié)點囱修。 不能操作屬性節(jié)點（使用屬性節(jié)點無法獲取父節(jié)點）
語法：
節(jié)點.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. 獲取子節(jié)點
5.1 childNode
childNodes 返回元素下的第一層所有子節(jié)點的集合，包含回車朵逝，文字蔚袍，注釋。
語法：
元素.childNodes
每一個節(jié)點都會有一個對應的下標配名，它還有一個length屬性啤咽，代表子節(jié)點的個數(shù)。
5.2 children
children 返回元素下的第一層所有子節(jié)點的集合渠脉，但是只包含標簽元素宇整。
它同樣是一個類數(shù)字，擁有length屬性芋膘，返回的節(jié)點都有一個對應的下標鳞青。
語法：
元素.children
這個屬性返回的結果都是標簽，但是他是非標準的
5.3 firstElementChild
firstElementChild 返回這個元素（父節(jié)點）下的第一個子節(jié)點为朋，如果沒有臂拓，則返回null
語法：
元素.firstElementChild
5.4 lastElementChild
lastElementChild 返回這個元素（父元素）下的最后一個子節(jié)點，如果沒有习寸，則返回null
語法：
元素.lastElementChild
6.獲取兄弟節(jié)點
previousElementSibling
previousElementSibling 返回這個節(jié)點的上一個兄弟節(jié)點胶惰，如果沒有，返回一個null
語法：
節(jié)點.previousElementSibling
nextElementSibling
nextElementSibling 返回下一個兄弟節(jié)點霞溪，如果沒有孵滞，那么會返回一個null
語法：
節(jié)點.nextElementSibling
屬性節(jié)點沒有兄弟節(jié)點。
