JS中获取节点的兄弟、父、子节点的各种问题

fly_xiaoba

于 2015-12-12 16:48:21 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/fly_xiaoba/article/details/50275821

其他专栏收录该内容

5 篇文章

订阅专栏

本文介绍了JavaScript中获取DOM节点的方法，包括父节点、子节点及兄弟节点，并提供了通过childNodes遍历和nextSibling属性来定位特定<div>元素的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS中获取节点的兄弟、父、子节点，一般情况下通过这种方式获取：

var chils= s.childNodes;  //得到s的全部子节点
var par=s.parentNode;   //得到s的父节点
var ns=s.nextSibling;   //获得s的下一个兄弟节点
var ps=s.previousSbiling;  //得到s的上一个兄弟节点
var fc=s.firstChild;   //获得s的第一个子节点
var lc=s.lastChild;   //获得s的最后一个子节点

获取<div>的下一个<div>时，发现通过nextSibling的方式获取不到，于是使用childNodes遍历的方式解决问题：

    function agree(obj,aid){
        var divParent=obj.parentNode;
        var divChilds=divParent.childNodes;
        var divNext;
        for (var i = 0; i <divChilds.length; i++) {
            if (divChilds[i].className == 'media-right disagree') 
                divNext=divChilds[i];
        }
    }

后来发现，还是可以通过nextSibling的方式的：

    function agree(obj,aid){
        var divNext=obj.nextSibling;
    }

原因是……在web前端代码中相邻元素（即上面例中的<div>）不换行、不空格就行了……