JS DOM遍歷節點

一、節點類型

節點類型	屬性nodeType返回值
元素節點	1
屬性節點	2
文本節點	3
註釋節點（comment）	8
document	9
DocumentFragment	11

                                                                           所以一般我們獲取節點類型用  nodeType

二、遍歷節點樹

這種遍歷可以遍歷  文本類節點、註釋節點、元素節點等。  任何瀏覽器都好使。

<div >
    <strong></strong>
    <span></span>
    <em></em>
</div>

parentNodes ——>父節點（最頂端的parentNode爲#document）;

var strong = document.getElementsByTagName('strong')[0];  
console.log(strong.parentNode);  

//strong.parentNodes ————div
 
//strong.parentNode.parentNode ————body
 
//strong.parentNode.parentNode.parentNode ————html
 
//strong.parentNode.parentNode.parentNode .parentNode————document

childNodes ——> 子節點們（div.childNodes[0] == div.childNodes.item(0)）

var div = document.getElementsByTagName('div')[0];
console.log(div.childNodes);

firstChild ——>第一個子節點

var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild);

lastChild ——> 最後一個子節點

var div = document.getElementsByTagName('div')[0];
console.log(div.lastChild);

nextSibling ————>後一個兄弟節點

var strong  = document.getElementsByTagName('strong')[0];
console.log(strong.nextSibling);

 

previousSibling ——>前一個兄弟節點 

var strong  = document.getElementsByTagName('strong')[0];
console.log(strong.previousSibling);

三、基於元素節點數的遍歷

遍歷元素節點。

除了children以外，其他遍歷ie9以下不兼容

<div >
    <strong></strong>
    <span></span>
    <em></em>
</div>

parentElement ——> 返回當前元素的父元素節點（IE不兼容）

var strong = document.getElementsByTagName('strong')[0];  
console.log(strong.parentElement);

 children ——> 只返回當前元素的元素子節點

var div = document.getElementsByTagName('div')[0];
console.log(div.children);

node.childElementCount === node.children.length 當前元素節點的子元素節點個數（IE不兼容）

var div = document.getElementsByTagName('div')[0];
console.log(div.children.length);

 

firstElementChild ——> 返回的是第一個節點（IE不兼容）

var div = document.getElementsByTagName('div')[0];
console.log(div.firstElementChild);

 

lastELementChild ————>返回的是最後一個元素節點（IE不兼容）

var div = document.getElementsByTagName('div')[0];
console.log(div.lastElementChild);

nextElementSibling / previousElementSibling ——> 返回後一個/前一個兄弟元素節點（IE不兼容）

var strong = document.getElementsByTagName('strong')[0];  
console.log(strong.nextElementSibling); 
console.log(strong.previousElementSibling);

 

四、節點的四個屬性

 nodeName

     元素的標籤名，返回字符串，以大寫的形式表示，只讀

var strong  = document.getElementsByTagName('strong')[0];
console.log(typeof(strong.nodeName) + strong.nodeName);

 nodeValue

     text節點或Comment節點的文本內容，可讀寫

<div><!-- 我是註釋節點內容 -->
    <span></span>
    <strong></strong>
    <em></em>
</div>

   nodeType

        該節點類型，只讀  （返回以上節點類型後面對應的值）

var strong  = document.getElementsByTagName('strong')[0];
console.log(strong.nodeType);

對應最上面表格  爲元素節點

attributes

        Element節點的屬性集合  ,屬性值可以改，但屬性名不可以改

<div class="demo"; id = "index">
        <span></span>
        <strong></strong>
        <em></em>
</div>

五、節點方法

  Node.hasChildNodes();   是否有孩子節點。有：true；沒有：false

var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes());

六、附錄