来自 服务器&运维 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

js如何获取兄弟、父类等节点_javascript技巧_脚本之家

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

比如一个ul里面有10个li,而第3个li上有特殊的样式。我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点。

js如何获取兄弟、父类等节点

 本文为大家介绍下js获取兄弟、父类等节点的方法,感兴趣的朋友可以参考下

var chils= s.childNodes; //得到s的全部子节点 

 

var par=s.parentNode; //得到s的父节点 

 

var ns=s.nextSbiling; //获得s的下一个兄弟节点 

 

var ps=s.previousSbiling; //得到s的上一个兄弟节点 

 

var fc=s.firstChild; //获得s的第一个子节点 

 

var lc=s.lastChile; //获得s的最后一个子节点 

 

本文为大家介绍下js获取兄弟、父类等节点的方法,感兴趣的朋友可以参考下 var chils= s.childNodes; //得到s的全部...

兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的。兄弟节点同理,下面是一个常规的获取兄弟节点的办法。

代码如下

function siblings {var a = [];var p = elm.parentNode.children;for(var i =0,pl= p.length;i思路:先获取此元素的父节点的所有子节点,因为所有子节点也包括此元素自己,所以要从结果中去掉自己。还有另外一种看起来比较奇特的方法,是jQuery里面获取兄弟节点的源码:代码如下function sibling {var r = [];var n = elem.parentNode.firstChild;for ( ; n; n = n.nextSibling ) {if ( n.nodeType === 1 && n !== elem ) {r.push;}}return r;}

思路:先找到此元素的父节点的第一个子节点,然后循环查找此节点的下一个兄弟节点,一直到查找完毕。

我很奇怪为什么jQuery会使用这个方法,难道这个方法比第一个方法效率更高?

经过我初步测试——1500多个li,上面两个方法效率几乎无差别,都是几毫秒内就获取成功了。测试环境是chrome与firefox。

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

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:js如何获取兄弟、父类等节点_javascript技巧_脚本之家

关键词: