zoukankan      html  css  js  c++  java
  • getElementsByClassName

    HTML5 DOM中新增了一个令人期待已久的方法:getElementsByClassName。这个方法能让我们通过class属性中的类名来访问元素,不过由于这个方法还比较新,某些DOM实现里可能还没有,所以使用的时候要当心。

    getElementsByClassName方法非常有用,但只有较新的浏览器才支持它,为了弥补这一不足,DOM脚本程序员需要使用已有的DOM方法来实现自己的getElementsByClassName。

    以下这个函数能适用于新老浏览器:

    function getElementsByClassName(node,classname){
       if(node.getElementsByClassName){
        //使用现有方法
       return node.getElementsByClassName(classname);
    }
    else{
    var results=new Array();
    var elems=node.getElementsByTagName("*");
    for(var i=0;i<elems.length;i++){
    if(elems[i].className.indexOf(classname)!=-1){
    results[results.length]=elems[i];
    }
    }
    return results;
    }
    }


    这个getElementsByClassName函数接受两个参数,第一个node表示DOM树中的搜索起点,第二个classname表示要搜索的类名。

    如果传入节点上已经存在了适当的getElementsByCLassName函数,那么这个新函数就直接返回相应的节点列表。如果这个函数不存在,这个新函数就会循环遍历所有标签,查找带有相应类名的元素(这个例子不适用于多个类名)。

    应用参考代码:

    <html>
    <meta charset="UTF-8">
    <html lang="en">
    <head>
    
    </head>
    <body>
    <ul id="uu">
        <li class="list">abc</li>
        <li class="list">def</li>
    <li class="list">hig</li>
    </ul>
    <button type="text"  onclick="show()" >book</button>
    <script>
    function getElementsByClassName(node,classname){
       if(node.getElementsByClassName){
        //使用现有方法
       return node.getElementsByClassName(classname);
    }
    else{
    var results=new Array();
    var elems=node.getElementsByTagName("*");
    for(var i=0;i<elems.length;i++){
    if(elems[i].className.indexOf(classname) != -1){
    results[results.length]=elems[i];
    }
    }
    return results;
    }
    }
    function show(){
        var sp=document.getElementById("uu");
        var ss=getElementsByClassName(sp,"list");
        alert(ss.length);
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    事务与锁的一些总结
    NYOJ 73
    NYOJ 456
    Sleep函数
    NYOJ 488(素数环)
    NYOJ 308
    NYOJ 27
    NYOJ 325
    NYOJ 138
    求两个或N个数的最大公约数(gcd)和最小公倍数(lcm)的较优算法
  • 原文地址:https://www.cnblogs.com/wyy725872/p/4437560.html
Copyright © 2011-2022 走看看