通过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)，以次后面的也是一样

3、访问到了第一个li，就可以通过第一个li节点来访问后面一个，那就是nextSibling,这里就可以通过ul.childNodes[1].nextSibling.nextSibling访问到第二个li(不要忘了之间的空白节点)；访问到第二个就可以通过previousBibling访问前面一个li节点

4、当然我们也可以直接通过firstChild和lastChild来访问ul的第一个节点和第二个节点

5、访问到子节点，直接parentNode找到父节点

解决空白节点的问题。。。下篇论

 

版权声明：本文为layaling原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/layaling/p/8583613.html