DOM節點關系
DOM可以將任何HTML描繪成一個由多層節點構成的結構。節點分為12種不同類型，每種類型分別表示文檔中不同的信息及標記。每個節點都擁有各自的特點、數據和方法，也與其他節點存在某種關系。節點之間的關系構成了層次，而所有頁面標記則表現為一個以特定節點為根節點的樹形結構。本文將詳細描述DOM間的節點關系
節點中的各種關系可以用傳統的家族關系來描述，相當於把文檔樹比喻成家譜。接下來，將把DOM節點關系分為屬性和方法兩部分進行詳細說明
屬性
父級屬性
parentNode
每個節點都有一個parentNode屬性，該屬性指向文檔樹中的父節點。對於一個節點來說，它的父節點只可能是三種類型：element節點、document節點和documentfragment節點。如果不存在，則返回null
<div id="myDiv"></div> <script>console.log(myDiv.parentNode);//bodyconsole.log(document.body.parentNode);//htmlconsole.log(document.documentElement.parentNode);//documentconsole.log(document.parentNode);//null</script>
<div id="myDiv"></div> <script>var myDiv = document.getElementById(‘myDiv‘); console.log(myDiv.parentNode);//bodyvar fragment = document.createDocumentFragment(); fragment.appendChild(myDiv); console.log(myDiv.parentNode);//document-fragment</script>
parentElement
與parentNode屬性不同的是，parentElement返回的是父元素節點
<div id="myDiv"></div> <script>console.log(myDiv.parentElement);//bodyconsole.log(document.body.parentElement);//htmlconsole.log(document.documentElement.parentElement);//documentconsole.log(document.parentElement);//null</script>
[註意]在IE瀏覽器中，只有Element元素節點才有該屬性，其他瀏覽器則是所有類型的節點都有該屬性
<div id="test">123</div><script>//IE瀏覽器返回undefined，其他瀏覽器返回<div id="test">123</div>console.log(test.firstChild.parentElement);//所有瀏覽器都返回<body>console.log(test.parentElement);</script>
子級屬性
childNodes
childNodes是一個只讀的類數組對象NodeList對象，它保存著該節點的第一層子節點
<ul id="myUl"><li><div></div></li></ul> <script>var myUl = document.getElementById(‘myUl‘);//結果是只包含一個li元素的類數組對象[li]console.log(myUl.childNodes);</script>
children
children是一個只讀的類數組對象HTMLCollection對象，但它保存的是該節點的第一層元素子節點
<div id="myDiv">123</div> <script>var myDiv = document.getElementById(‘myDiv‘);//childNodes包含所有類型的節點，所以輸出[text]console.log(myDiv.childNodes);//children只包含元素節點，所以輸出[]console.log(myDiv.children);</script>
childElementCount
返回子元素節點的個數，相當於children.length
[註意]IE8-瀏覽器不支持
<ul id="myUl">
<li></li>
<li></li>
</ul>
<script>var myUl = document.getElementById(‘myUl‘);
console.log(myUl.childNodes.length);//5，IE8-瀏覽器返回2，因為不包括空文本節點console.log(myUl.children.length);//2console.log(myUl.childElementCount);//2，IE8-瀏覽器返回undefined</script>
firstChild
第一個子節點
lastChild
最後一個子節點
firstElementChild
第一個元素子節點
lastElementChild
最後一個元素子節點
上面四個屬性，IE8-瀏覽器和標準瀏覽器的表現並不一致。IE8-瀏覽器不考慮空白文本節點，且不支持firstElementChild和lastElementChild
//ul標簽和li標簽之間有兩個空白文本節點，所以按照標準來說，ul的子節點包括[空白文本節點、li元素節點、空白文本節點]。但在IE8-瀏覽器中，ul的子節點只包括[li元素節點]<ul>
<li></li>
</ul>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>console.log(list.firstChild);//標準瀏覽器中返回空白文本節點，IE8-瀏覽器中返回<li>1</li>console.log(list.lastChild);//標準瀏覽器中返回空白文本節點，IE8-瀏覽器中返回<li>3</li>console.log(list.firstElementChild);//標準瀏覽器中<li>1</li>，IE8-瀏覽器中返回undefinedconsole.log(list.lastElementChild);//標準瀏覽器中<li>3</li>，IE8-瀏覽器中返回undefined</script>
同級屬性
nextSibling
後一個節點
previousSibling
前一個節點
nextElementSibling
後一個元素節點
previousElementSibling
前一個元素節點
與子級屬性類似，上面四個屬性，IE8-瀏覽器和標準瀏覽器的表現並不一致。IE8-瀏覽器不考慮空白文本節點，且不支持nextElementSibling和previousElementSibling
<ul>
<li>1</li>
<li id="myLi">2</li>
<li>3</li>
</ul>
<script>var myLi = document.getElementById(‘myLi‘);
console.log(myLi.nextSibling);//空白節點，IE8-瀏覽器返回<li>3</li>console.log(myLi.nextElementSibling);//<li>3</li>，IE8-瀏覽器返回undefinedconsole.log(myLi.previousSibling);//空白節點，IE8-瀏覽器返回<li>1</li>console.log(myLi.previousElementSibling);//<li>1</li>，IE8-瀏覽器返回undefined</script>
方法
包含方法
hasChildNodes()
hasChildNodes()方法在包含一個或多個子節點時返回true，比查詢childNodes列表的length屬性更簡單
<div id="myDiv">123</div> <script>var myDiv = document.getElementById(‘myDiv‘); console.log(myDiv.childNodes.length);//1console.log(myDiv.hasChildNodes());//true</script>
<div id="myDiv"></div> <script>var myDiv = document.getElementById(‘myDiv‘); console.log(myDiv.childNodes.length);//0console.log(myDiv.hasChildNodes());//false</script>
contains()
contains方法接受一個節點作為參數，返回一個布爾值，表示參數節點是否為當前節點的後代節點。參數為後代節點即可，不一定是第一層子節點
<div id="myDiv">
<ul id="myUl">
<li id="myLi"></li>
<li></li>
</ul>
</div>
<script>console.log(myDiv.contains(myLi));//trueconsole.log(myDiv.contains(myUl));//trueconsole.log(myDiv.contains(myDiv));//true</script>
[註意]IE和safari不支持document.contains()方法，只支持元素節點的contains()方法
//IE和safari報錯，其他瀏覽器返回trueconsole.log(document.contains(document.body));
關系方法
compareDocumentPosition()
compareDocumentPosition方法用於確定節點間的關系，返回一個表示該關系的位掩碼
000000 0 兩個節點相同000001 1 兩個節點不在同一個文檔（即有一個節點不在當前文檔）000010 2 參數節點在當前節點的前面000100 4 參數節點在當前節點的後面001000 8 參數節點包含當前節點010000 16 當前節點包含參數節點100000 32 瀏覽器的私有用途
<div id="myDiv">
<ul id="myUl">
<li id="myLi1"></li>
<li id="myLi2"></li>
</ul>
</div>
<script>//20=16+4，因為myUl節點被myDiv節點包含，也位於myDiv節點的後面console.log(myDiv.compareDocumentPosition(myUl));//10=8+2，因為myDiv節點包含myUl節點，也位於myUl節點的前面console.log(myUl.compareDocumentPosition(myDiv));//0，兩個節點相同console.log(myDiv.compareDocumentPosition(myDiv));//4，myLi2在myLi1節點的後面console.log(myLi1.compareDocumentPosition(myLi2));//2，myLi1在myLi2節點的前面console.log(myLi2.compareDocumentPosition(myLi1));</script>
isSameNode()和isEqualNode()
這兩個方法都接受一個節點參數，並在傳入節點與引用節點相同或相等時返回true
所謂相同(same)，指的是兩個節點引用的是同一個對象
所謂相等(equal)，指的是兩個節點是相同的類型，具有相等的屬性(nodeName、nodeValue等等)，而且它們的attributes和childNodes屬性也相等(相同位置包含相同的值)
[註意]firefox不支持isSameNode()方法，而IE8-瀏覽器兩個方法都不支持
<script>var div1 = document.createElement(‘div‘);
div1.setAttribute("title","test");var div2 = document.createElement(‘div‘);
div2.setAttribute("title","test");
console.log(div1.isSameNode(div1));//trueconsole.log(div1.isEqualNode(div2));//trueconsole.log(div1.isSameNode(div2));//false</script>DOM節點關系