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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM