JavaScript 获取元素所有兄弟节点的两种实现与 jQuery 方法解析

JavaScript 获取兄弟节点的两种实现与性能对比

假设有一个包含10个li元素的ul列表，其中第3个li被设置了特殊样式（例如字体颜色为红色，其余为黑色）。如果希望将其他所有li的颜色也统一改为红色，但排除那个红色的li本身，此时就需要获取该红色li的所有兄弟节点。

所谓兄弟节点，指的是与当前元素处于同一层级的节点，既不是父级也不是子级，且可能包含序号在前的兄节点或序号在后的弟节点。下面介绍一种常规获取兄弟节点的方法。

具体实现代码如下：

function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}

核心思路是：首先获取该元素父节点下的所有子节点集合，由于该集合中包含了当前元素自身，因此需要遍历并排除掉当前元素，从而得到剩余的兄弟节点。

此外，还有一种看似较为独特的方法，源自jQuery内部获取兄弟节点的源码实现：

具体实现代码如下：

function sibling( elem ) {
var r = [];
var n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}

return r;
}

该方法的思路是：首先定位到父节点的第一个子节点，然后利用循环不断查找当前节点的下一个兄弟节点（nextSibling），直到遍历完所有节点为止。

对此感到疑惑的是，jQuery为何选择这种实现方式？难道这种方式比第一种方法具有更高的执行效率吗？

经过初步的性能测试——在包含1500多个li元素的场景下，上述两种方法的执行效率几乎无差别，均在几毫秒内完成获取。测试环境为Chrome和Firefox浏览器。

如果有获取所有兄弟节点的需求，可以使用上述任意一种方法。

当然，后续在实际使用中可能会进一步验证这两种方法的差异，如有新的发现或出入，将适时更新本文内容。

jQuery 节点查找方法详解

接下来介绍jQuery中关于父节点、子节点及兄弟节点的查找方法：

jQuery.parent(expr) 用于查找父节点，支持传入表达式进行过滤，例如 $("span").parent() 或 $("span").parent(".class")。

jQuery.parents(expr) 类似于 jQuery.parent(expr)，但会查找所有的祖先元素，而不仅限于直接父节点。

jQuery.children(expr) 返回所有直接子节点，该方法仅返回直接的孩子节点，不会递归返回所有的子孙节点。

jQuery.contents() 返回包含节点和文本在内的所有内容。与 children() 的区别在于，空白文本节点也会被作为一个节点对象返回。

而 children() 则只返回节点对象，忽略文本节点。

jQuery.prev() 返回上一个兄弟节点，注意它只返回紧邻的前一个兄弟节点，而非所有前面的兄弟节点。

jQuery.prevAll() 返回当前元素之前所有的兄弟节点。

jQuery.next() 返回下一个兄弟节点，同样只返回紧邻的后一个兄弟节点。

jQuery.nextAll() 返回当前元素之后所有的兄弟节点。

jQuery.siblings() 返回所有兄弟姐妹节点，不区分前后顺序。

jQuery.find(expr) 与 jQuery.filter(expr) 的功能完全不同。jQuery.filter() 是从初始的 jQuery 对象集合中筛选出一部分元素，而 jQuery.find() 的返回结果中不包含初始集合中的内容。

例如 $("p").find("span") 是从 <p> 元素内部开始查找 <span> 元素，其效果等同于 $("p span")。

以上关于 JavaScript 获取元素所有兄弟节点的实现方法及 jQuery 相关查找技巧，就是本文分享的全部内容，希望能为大家提供参考，也希望大家多多支持本站。