javascript DOM操作 節點的遍歷

一、通過javascript的遍歷可以由一個節點來查找它的子節點（childNodes）、兄弟節點(nextSibling/previousSibling)和父節點(parentNode)。

代碼說明：

<ul id="myul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

 

1、獲取ul的所有子節點——childNodes

<script>
        var ul=document.getElementById('myul');
        for(var i=0;i<ul.childNodes.length;i++){
            console.log(ul.childNodes[i]);
        }
    </script>

2、因為通過1獲取了ul的所有的子節點，所以就可以直接通過childNodes來直接訪問它里面的子節點

    提醒：1、childNodes最后獲得的是一個數組對象childNodes[i]    2、這里所獲得的素有子節點也包括空白節點，看截圖

 

所以，

訪問第一個li： ul.childNodes[1]或者ul.childNodes.item(1)

       第二個li： ul.childNodes[3]或者ul.childNodes.item(3)

       第三個li： ul.childNodes[5]或者ul.childNodes.item(5)

       第四個li： ul.childNodes[7]或者ul.childNodes.item(7)

      

3、訪問到了第一個li，就可以通過第一個li節點來訪問后面一個或者前面一個，那就是nextSibling/previousSibling

    所以：

    第二個li：ul.childNodes[1].nextSibling.nextSibling(不要忘了之間的空白節點);

    第一個li:   ul.childNodes[3].previousSibling.previousSibling

4、當然我們也可以直接通過firstChild和lastChild來訪問ul的第一個節點和第二個節點

5、訪問到子節點，直接parentNode找到父節點

 

二、解決空白節點的問題

   1、在js里面添加一個判斷

<script>
        var ul=document.getElementById('myul');
        for(var i=0;i<ul.childNodes.length;i++){
               if(ul.childNodes[i].nodeType==1){
                console.log(ul.childNodes[i]);
            }
        } 
</script>

這樣控制台打印出的結果就是4個li子元素

2、還是上面的例子

     獲得所有li:  ul.children獲得一個數組

    第一個li：ul.children[0]或者ul.children.item(0)或者ul.firstElementChild;

    兄弟li：nextElementSibling/previousElementSibling

    最后一個li：lastElementChild