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