zoukankan      html  css  js  c++  java
  • 两种获取元素所有兄弟节点的方法比较

    下面是一个常规的获取兄弟节点的办法。

    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个同级元素,上面的两个方法到底谁效率高呢?求高人解答

    原: http://www.jo2.org/archives/350.htm.

    专职web前端,精通html,css,熟练javascript.努力学习新知识中 博客文章欢迎转载,但抵制剽窃。
  • 相关阅读:
    修改ESMAP中的LOGO
    AppCompatActivity隐藏顶部任务栏
    Android原生开发,view标签导致RecyleView Adapter 中报错的奇葩问题
    用UPUPW做服务器,通过thinkphp5完美搭建APP后台
    hhh
    Redis 学习
    无刷新文件上传
    mongoDB 学习
    MySQL读写分离-架构
    Mysql 通用二进制包安装
  • 原文地址:https://www.cnblogs.com/lixlib/p/2576306.html
Copyright © 2011-2022 走看看