常用JS—查找相邻兄弟元素、子元素的两种兼容写法

最新推荐文章于 2025-06-24 13:44:01 发布

原创最新推荐文章于 2025-06-24 13:44:01 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #DOM

Javascript 专栏收录该内容

35 篇文章

订阅专栏

本文深入解析了DOM中nextSibling、nextElementSibling、previousSibling、previousElementSibling等属性的使用方法及兼容性写法，并对比了children与childNodes的区别，帮助开发者更好地理解和操作DOM结构。

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

nextSibling && nextElementSibling，previousSibling&&previousElementSibling

1、使用nextSibling属性返回指定节点之后的下一个兄弟节点，（即：相同节点树层中的下一个节点）。nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；

2、previousSibling返回上一个兄弟节点，其他和nextSibling类似；

3、nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点），如果该元素已经是最后一个元素节点,则返回null,该属性是只读的（IE6,7,8不兼容）；

4、previousElementSibling属性只返回元素节点之前的兄弟元素节点，其他和nextElementSibling类似；

兼容写法：
function getNextNode(ele){
    if(ele.nextElementSibling!== undefined){
    	//IE9+,Chrome,firefox..
        return ele.nextElementSibling;
    }else{
        var item = ele.nextSibling ;
        //IE8-
        while(item && item.nodeType !=1){
            item = item.nextSibling ;
        }
        return item;
    }
}

children && childNodes

children:只包含元素节点
childNodes:包含所有类型的节点

function getChildrenNode(node){
    var allNodes = [];
    if(ele.children !== undefined){
    	//IE9+,Chrome,firefox..
    	  var nodeList = node.children;
    	for(var i = 0;i < nodeList.length;i++){
            //childNode获取到到的节点包含了各种类型的节点
            //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点
            allNodes.push(nodeList[i]);       
        }
    }else{
        var nodeList = node.childNodes;
        //IE8-
        for(var i = 0;i < nodeList.length;i++){
            //childNode获取到到的节点包含了各种类型的节点
            //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点
            var childNode = nodeList[i];
            //判断是否是元素结点
            if(childNode.nodeType == 1){
              allNodes .push(childNode);
            }
        }
    }
         return allNodes ;
}