什么是DOM砚蓬？
DOM 是 JavaScript 操作網(wǎng)頁的接口瞪慧，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網(wǎng)頁轉(zhuǎn)為一個 JavaScript 對象，從而可以用腳本進行各種操作（增刪改查）。通過 HTML DOM介劫，可訪問 JavaScript HTML 文檔的所有元素。DOM 使 JavaScript 有能力對 HTML 事件做出反應案淋。
DOM 樹
瀏覽器會根據(jù) DOM 模型座韵，將結(jié)構(gòu)化文檔（比如 HTML 和 XML）解析成一系列的節(jié)點，再由這些節(jié)點組成一個樹狀結(jié)構(gòu)（DOM Tree）踢京。
節(jié)點 node
DOM的最小組成單位就是node誉碴。檔的樹形結(jié)構(gòu)（DOM 樹），就是由各種不同類型的節(jié)點組成瓣距。每個節(jié)點可以看作是文檔樹的一片葉子黔帕。
節(jié)點的7種類型
Document：整個文檔樹的頂層節(jié)點
DocumentType：doctype標簽（比如<!DOCTYPE html>）
Element：網(wǎng)頁的各種HTML標簽（比如<body>、<a>等）
Attribute：網(wǎng)頁元素的屬性（比如class="a" src='img/a.png'）
Text：標簽之間或標簽包含的文本
Comment：注釋
DocumentFragment：文檔的片段 //不常用
Text類型
文本節(jié)點由Text 類型表示蹈丸，包含的是可以照字面解釋的純文本內(nèi)容成黄。純文本中可以包含轉(zhuǎn)義后的
HTML 字符，但不能包含HTML 代碼白华。Text 節(jié)點具有以下特征：
? nodeType 的值為3慨默；
? nodeName 的值為”#text”贩耐；
? nodeValue 的值為節(jié)點所包含的文本弧腥；
? parentNode 是一個Element；
? 不支持（沒有）子節(jié)點潮太。
擴展：獲取文本內(nèi)容
1 .innerHTML
從對象的起始位置到終止位置的全部內(nèi)容,包括Html標簽管搪。
innerHTML可以作為獲取文本的方法也可以作為修改文本內(nèi)容的方法
element.innerHTML 會直接返回element節(jié)點下所有的HTML化的文本內(nèi)容
！注意 innerHTML方法只能作用于元素節(jié)點調(diào)用铡买；文本節(jié)點并不能使用這個方法返回undefined
innerText 與 innerHtml 都是打印標簽之間的文本信息
1更鲁、innerText 打印標簽之間的純文本信息，會將標簽過濾掉奇钞，低版本的火狐瀏覽器不支持澡为，而是支持textContent
2、innerHtml 打印標簽之間的內(nèi)容景埃，包括標簽和文本信息媒至，各瀏覽器都支持顶别，但是高版本的瀏覽器會原樣打印
innerText 與 innerHtml不僅在獲取元素文本上有區(qū)別，而且在設(shè)置上同樣有區(qū)別拒啰。
1驯绎、innerText 在設(shè)置HTML標簽時，會將<>進行轉(zhuǎn)義谋旦，在輸出的時候會原樣輸出剩失，并不會解析HTML標簽
2、innerHtml 在設(shè)置HTML標簽時册着，瀏覽器會將HTML標簽名解析成對應的標簽
2.3 textContent
textContent與innerHTML方法類似會返回對象節(jié)點下所有的文本內(nèi)容
但是區(qū)別為 textContent返回的內(nèi)容只有去HTML化的文本節(jié)點的內(nèi)容 如上例：
document.body.textContent //返回"文本文本" 拴孤！注意在DOM中標簽換行產(chǎn)生的空白字符會計入DOM中作為文本節(jié)點
另外IE8以前不支持textContent屬性
2.4 innerText
從起始位置到終止位置的內(nèi)容, 但它去除Html標簽
innerText方法與textContent方法類似 并且和innerHTML一樣也是作用于元素節(jié)點上
但是瀏覽器對于這兩種方法解析空白字符的機制不一樣；不是很常用
類似的還有outText outHTML等類似操作文本相關(guān)的方法
outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式
除了包含innerHTML的全部內(nèi)容外, 還包含對象標簽本身甲捏。
outerText 設(shè)置(包括標簽)或獲取(不包括標簽)對象的文本
最后要提醒一點：文本與文本節(jié)點一定要區(qū)分乞巧，有些方法是依靠元素節(jié)點返回子文本內(nèi)容，有些方法是文本節(jié)點返回自身文本內(nèi)容摊鸡，文本節(jié)點是對象而文本只是字符串绽媒；
innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器
注意：瀏覽器在解析節(jié)點中空白符時免猾，會把它當作文本節(jié)點是辕。因為瀏覽器的差異在對于非空文本節(jié)點前面或后面有空格或換行符等特殊的文本字符組成，IE和FF就會產(chǎn)生分歧猎提，IE會忽略這些節(jié)點获三，而FF則認可這些節(jié)點。分歧產(chǎn)生的原因是FF認為<dl> 和</dl>,<dt>和</dt>,<dd>和</dd>之間的空白節(jié)點也是一個單獨的節(jié) 點锨苏，所說FF的結(jié)果是5疙教，而IE的結(jié)果是2。
由于元素書寫時存在空白換行符等伞租，所以導致在操作DOM節(jié)點出現(xiàn)問題贞谓，所以在遍歷子節(jié)點時應該對文本節(jié)點做特殊處理，可以利用Document類型的nodeType屬性過濾文本節(jié)點：
例：根據(jù)NodeType來判斷：var td = document.getElementById("TEST");
var childs=[],i,len,node;
for(i=0,len=td.childNodes.length;i<len;i++){
node=td.childNodes[i];
//過濾文本節(jié)點
if(node.nodeType!=3){
childs.push(node);
}
}
alert(childs.length); //結(jié)果為2
節(jié)點的屬性：
nodeType
nodeType屬性返回一個整數(shù)值葵诈，表示節(jié)點的類型裸弦。
文檔節(jié)點（document）：9
元素節(jié)點（element）：1
屬性節(jié)點（attribute）：2
文本節(jié)點（text）：3
文檔片斷節(jié)點（DocumentFragment）：11
文檔類型節(jié)點（DocumentType）10
注釋節(jié)點（Comment）：8，
nodeName
nodeName 返回節(jié)點的名稱
文檔節(jié)點（document）：#document
元素節(jié)點（element）：大寫的標簽名
屬性節(jié)點（attr）：屬性的名稱
文本節(jié)點（text）：#text
文檔片斷節(jié)點（DocumentFragment）：#document-fragment
文檔類型節(jié)點（DocumentType）：文檔的類型
注釋節(jié)點（Comment）：#comment
nodeValue
nodeValue 返回節(jié)點的文本值作喘，可讀可寫
nodeValue是一個HTML DOM的對象屬性理疙；
同樣的 可以通過 nodeValue設(shè)置節(jié)點的文本內(nèi)容也可以直接返回文本內(nèi)容
直接用節(jié)點對象調(diào)用就都可以： 如上例
document.getElementsByTagName(div)[0].childNodes[0].nodeValue //返回“文本”
另外 nodeValue 屬性并不只存在于文本節(jié)點下 元素節(jié)點和屬性節(jié)點對象也都具有nodeValue屬性
屬性節(jié)點的 nodeValue屬性返回屬性值
元素節(jié)點的 nodeValue屬性返回null
節(jié)點的屬性 textContent 返回當前節(jié)點和他所有后代節(jié)點的文本。忽略標簽泞坦。
例：<div id="div">我是 <span>span</span> </div>
document.getElementById('div').textContent //我是span
同樣textContent也是一個可讀可寫的屬性窖贤。如果寫入的內(nèi)容包含標簽， 也會把標簽當做文本。
例：div.textContent='<p>我是p</p>'
nextSibling：
nextSibling 返回當前節(jié)點的下一個兄弟節(jié)點
例：<div id="d1">hello</div><div id="d2">world</div>
var div1 = document.getElementById('d1');
div1.nextSibling
sibling:就是兄弟的意思
next:下一個的意思
previous:前一個的意思
如果不存在下一個兄弟節(jié)點則返回null
a赃梧、下一個兄弟節(jié)點=節(jié)點.nextElementSibling || 節(jié)點.nextSibling
①.nextSibling: 調(diào)用者是節(jié)點在IE678中指下一個元素節(jié)點(標簽),在火狐谷歌IE9+以后都指的是下一個節(jié)點(包括空文檔和換行節(jié)點).
②. nextElementSibling:在火狐谷歌IE9都指的是下一個元素節(jié)點
總結(jié):在IE678中用nextSibing,在火狐谷歌IE9+以后用nextElementSibing
perviousSibling：
b择吊、前一個兄弟節(jié)點=節(jié)點.previousElemnentSibling || 節(jié)點.previousSibling
①. previousSibling:調(diào)用者是節(jié)點,IE678中指前一個元素節(jié)點(標簽).在火狐谷歌IE9+以后都指的是前一個節(jié)點(包括空文檔和換行節(jié)點)
②. previousElementSibling:在火狐谷歌IE9都指的是下一個元素節(jié)點
總結(jié):在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling
firstchild：
3 單個子節(jié)點
a、第一個子節(jié)點=父節(jié)點.firstElementChild || 父節(jié)點.firstChild
①.first:調(diào)用者是父節(jié)點,IE678中指第一個子元素節(jié)點(標簽).在火狐谷歌IE9+以后都指的是第一個節(jié)點(包括文檔和換行節(jié)點)
②. firstElementChild:在火狐谷歌IE9都指的第一個元素節(jié)點
lastchild：
b槽奕、最后一個子節(jié)點=父節(jié)點.lastElementChild ||父節(jié)點.lastChild
①. lastChild:調(diào)用者是父節(jié)點,IE678中指最后一個子元素節(jié)點(標簽),在火狐谷歌IE9+以后都指的是最后一個節(jié)點(包括空文檔和換行節(jié)點)
②. lastElementChild:在火狐谷歌IE9+都指的是最后一個元素節(jié)點
childNodes：
所有子節(jié)點
a几睛、子節(jié)點數(shù)組=父節(jié)點.childNodes 獲取所有節(jié)點，是一個nodelist數(shù)據(jù)
ChildNodes:它是標準屬性,他返回指定元素的子元素集合（返回當前所有的子節(jié)點）粤攒，包括HTML節(jié)點 所有屬性 文本節(jié)點 (它是W3C的親兒子)
火狐 谷歌等高版本會把換行也看做是子節(jié)點
* ①.nodeType = 1 表示的是元素節(jié)點 記住 元素就是標簽
* ②. nodeType = 2 表示屬性節(jié)點
* ③. nodeType = 3 表示文本節(jié)點
- b所森、子節(jié)點數(shù)組=父節(jié)點.children; 用的最多
children:非標準屬性,他只返回指定元素的子元素集合（返回當前所有的元素子節(jié)點），
但他只返回HTML節(jié)點,甚至不反悔文本節(jié)點,雖然不是標準的DOM屬性,但他和innerHTML方法一樣,得到了幾乎所有瀏覽器的支持,
children 在IE678中包含注釋節(jié)點,
在IETF78中,注釋節(jié)點不要寫在里面
節(jié)點自己.parentNode.children[index]; 隨意得到兄弟節(jié)點
獲取所有的兄弟節(jié)點
function siblings(elm){
var a=[ ];
var p=elm.parentNode.children;
for(var i=0;i<p.length;i++){
if(p[i] !==elem){
a.push(p[i]);
}
}
return a;
}
父節(jié)點（parentNode夯接、parentElement）
parentNode,parentElement 區(qū)別
parentElement 和 parentNode一樣,但parentNode是W3C標準的焕济，而parentElement 只在IE中可用.
firstChild,lastChild,nextSibling,previousSibling都會將空格或者換行當做節(jié)點處理，但是有代替屬性
所以為了準確地找到相應的元素盔几，會用
firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling
兼容的寫法晴弃，這是JavaScript自帶的屬性。
但壞消息是IE6,7,8不兼容這些屬性逊拍。IE9以上和火狐谷歌支持上鞠。
