標籤：
DOM文件物件模型DOM（document object model）文件物件模型，它定義了操作文檔對象的介面。
DOM 把一份html文檔表示為一棵家譜樹，使用parent（父），child（子），sibling（兄弟）等記號來表明家庭成員之間的關係。
一、節點（node）節點一詞來自於網路理論，這代表著網路中的一個個的連接點，網路是由節點構成。
對於html文檔也是一樣，文檔是由節點構成的集合。
1、元素節點元素節點如<body> <p> <div> 之類的元素，這些元素在文檔中的布局形成了文檔的結構。
2、文本節點文本節點指的是元素節點中的內容，但並非所有的元素節點都包含有文本節點。
3、屬性節點元素都或多或少有一些屬性，屬性的作用是對元素作出更具體的描述。屬性節點總是被包含在元素節點當中。
二、擷取文檔對象1、querySelector()HTML5新加入的方法，通過傳入合法的CSS選取器，即可擷取合格第一個元素
例：document.querySelector("#test"); //返回id為test的首個div
2、querySelectorAll()HTML5新加入的方法，通過傳入合法的CSS選取器，即可擷取所有合格元素，返回對象數組
例：document.querySelectorAll("div.foo"); //返回所有帶foo類樣式的div元素對象
注意：使用這上面兩個方法無法尋找帶偽類狀態的元素，比如querySelector(‘:hover‘)不會得到其結果。
3、getElementById()這個方法返回一個與給定id屬性值的元素節點相關對應的對象。
例：document.getElementById(‘box‘);
4、getElementsByIdTagName()這個方法返回一個對象數組。每個對象分別對應著文檔裡給定標籤的一個元素。
例：document.getElementByTagName(‘li‘);
5、getElementsByName()通過name擷取一個對象數組
三、間接引用節點（擴充）除了可以直接引用節點，還可以通過節點間的關係來引用相對節點。
1、引用子節點每個節點都有一個childNodes集合屬性，類型是數組對象，表示該節點的所有子節點的集合。這些子節點按照其在文檔中出現的順序排列，因此可以通過索引來依次訪問各個子節點。
例：
document.childNodes[1]; //引用文檔的根節點
document.childNodes[0].childNodes[0] //引用<head>節點
document.childNodes[0].childNodes[1] //引用<body>節點
除了使用childNodes屬性，還有兩個屬性可以用於引用子節點，分別是：
element.firstChild;
element.lastChild;
它們分別表示第一個子節點和最後一個子節點。
2、引用父節點html的節點層次是一個樹狀結構，除了根節點外，每個節點都僅有一個父節點，可以有parentNode屬性來引用
element.parent.Node; //引用父節點
3、引用兄弟節點屬於同一個文檔層次的節點稱為兄弟節點，有兩個屬性可以用於兄弟節點間引用，分別是：
element.nextSibling; //引用下一個兄弟節點
element.previous.Sibling; //引用上一個兄弟節點
四、擷取節點資訊（擴充）在獲得一個節點的引用後，有一些方法可以獲得該節點的資訊。
1、nodeName 擷取節點名稱文法： Node.nodeName;
不同的類型的節點，nodeName的傳回值有所差異：
元素節點：返回標記名稱；
屬性節點：返回屬性名稱；
文本節點：返迴文本 #text
2、nodeType 擷取節點類型文法：Node.nodeType;
元素節點：返回 1
屬性節點：返回 2
文本節點：返回 3
3、nodeValue 擷取節點的值文法：Node.nodeValue;
元素節點：返回null
屬性節點：返回節點值
文本節點：返迴文本內容
五、處理屬性節點1、get.Attribute 擷取節點屬性值object.getAttribute(attribute)
例：
var a = document.getElementByTagName(‘a‘);
for(var i = 0; i<a.length; i++){
alert(a[i].get.Attribute(‘title‘));
}
2、set.Attribute() 設定節點屬性值object.setAttribute(attribute, value)
例：
var link = document.getElementById(‘link‘);
link.setAttribute(‘title‘, ‘連結提示資訊‘);
六、處理文本節點1、node.innerHTML擷取該節點下的包含HTML標籤的常值內容
例：
var body = document.querySelector(‘body‘);
alert(html.innerHTML);
2、node.textContent擷取該節點下的純文字內容
例：
var body = document.querySelector(‘body‘);
alert(html.textContent);
七、因瀏覽器而異的空白節點（擴充）IE瀏覽器和Firefox瀏覽器對空白節點的處理不同，IE瀏覽器會忽略這些節點，而Firefox瀏覽器則認可這些節點。
處理方法：
1、避免在文檔中出現文本節點
function clearWhitespace(element){
for(var i = 0; i<element.childNodes.length; i++){
var node = element.childNodes[i];
//判斷是否是空白節點，如果是則刪除該節點
if(node.nodeType == 3 && !^S/.test(node.nodeValue){
node.parentNode.removeChild(node);
}
}
}
DOM總結：一份文檔就是一棵樹；
節點分為不同的類型，分別是：元素節點，屬性節點，文本節點；
每個節點都是一個對象；
9.8 js進階總結3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
