两种获取元素所有兄弟节点的方法比较
下面是一个常规的获取兄弟节点的办法。
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; }
思路:先找到此元素的父节点的第一个子节点,然后循环查找此节点的下一个兄弟节点,一直到查找完毕。
我很奇怪为什么jQuery会使用这个方法,难道这个方法比第一个方法效率更高?
经过我初步测试——1500多个li,上面两个方法效率几乎无差别,都是几毫秒内就获取成功了。测试环境是chrome与firefox。
如果有获取所有兄弟节点的需求,可以使用以上任一方法。
不过,我想问个钻牛角尖的问题。如果在极端的情况下,比如10000个同级元素,上面的两个方法到底谁效率高呢?求高人解答
专职web前端,精通html,css,熟练javascript.努力学习新知识中
博客文章欢迎转载,但抵制剽窃。
分类:
Javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构