原生JavaScript 获取下一个/上一个同胞元素

最新推荐文章于 2024-09-21 03:44:45 发布

weixin_30700099

最新推荐文章于 2024-09-21 03:44:45 发布

阅读量626

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lijinwen/p/6249377.html

本文介绍如何使用原生JavaScript获取元素的下一个或上一个同胞元素，包括nextSibling/prevSibling及兼容性问题，并提供了一个兼容IE5+的手动实现方法。

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

看JavaScript遇到的问题，研究了下

获取上一个或者下一个同胞元素，使用很多人会立马想到JQuery prev() 和 next() 的确非常方便。那么原生的JavaScript该怎么获取上一个或者下一个同胞元素呢？

JavaScript 提供了原生的API nextSibling / prevSibling;

用法：

ele.nextSibling

问题：在现代浏览器中，nextSibing会返回下一个节点，但通常下一个节点是文本节点（产生文本节点的原因是标签之间的换行，空格等）而非元素节点。

例如：

获取li2, 使用document.querySelector("li2").nextSibling 并不能选中<li>3</li>，而是选中了文本节点。因此JavaScript提供的新的api ：nextElementSibling / previousElementSibling但是这个api不支持ie8;要兼容IE8只能手动写函数了。

        function getNextSibilingsNode(ele) {
            var parsent = ele.parentNode;//获取元素父元素
            var childrens = parsent.childNodes;//获取兄弟元素
            var i = 0;
            for(i; i < childrens.length; i++) {
                if(childrens[i].nodeType == 1 && childrens[i] == ele){//元素节点nodeType值为1，剔除文本节点
                    if(childrens[i+1].nodeType == 1){//防止li之间没有换行，直接选择下一个i+1
                        return childrens[i+1];
                    }if(childrens[i+2].nodeType == 1){//跳过文本节点，所以i+2
                        return childrens[i+2];
                    }
                    else{
                        throw error("传入的元素出错，请检查，可能这是最后一个元素");
                    }
                }
            }
        }

这个方法测试了下，兼容ie5+了。足够用了。

prev方法获取前一个同胞元素

        function getNextSibilingsNode(ele) {
            var parsent = ele.parentNode;//获取元素父元素
            var childrens = parsent.childNodes;//获取兄弟元素
            var i = 0;
            for(i; i < childrens.length; i++) {
                if(childrens[i].nodeType == 1 && childrens[i] == ele){//元素节点nodeType值为1，剔除文本节点
                    if(childrens[i-1].nodeType == 1){//防止li之间没有换行，直接选择下一个i+1
                        return childrens[i-1];
                    }if(childrens[i-2].nodeType == 1){//跳过文本节点，所以i+2
                        return childrens[i-2];
                    }
                    else{
                        throw error("传入的元素出错，请检查，可能这是第一个元素");
                    }
                }
            }
        }