zoukankan      html  css  js  c++  java
  • getElementByClassName封装函数用法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <head>
        <title>getElementByClassName封装用法</title>
        <script type="text/javascript">
            function $(node){
                node=typeof  node=="string"?document.getElementById(node):node;
                return node;
            }
            function getClassName(str,root,tag){
                if(root){
                    root=typeof  root=="string"?document.getElementById(root):root;
                }else{
                    root=document.body;
                }
                tag=tag||"*";
                var els=root.getElementsByTagName(tag),arr=[];
                for(var i= 0,n=els.length;i<n;i++){
                    for(var j= 0,k=els[i].className.split(" "),l= k.length;j<l;j++){
                        if(k[j]==str){
                            arr.push(els[i]);
                            break;
                        }
                    }
                }
                return arr;
    
            }
    window.onload=function(){
        var a=getClassName("a");
        var b=getClassName("b",null,"strong");
        var c=$("box");
        var d=getClassName("b",c);
        for(var i=0;i< a.length;i++){
            a[i].onclick=function(){
                alert(this.innerHTML);
            }
        }
        //alert(a.length);
        //alert(b.length);
        //alert(d.innerHTML);
       alert(d.length);
    }
        </script>
    </head>
    
    <body>
    <span class="a">aa</span>
    <span class="a">aa2</span>
    <p class="a">aaa333</p>
    <strong class="b">bbbb</strong>
    
    <div id="box"><strong class="b">sdfdsf</strong></div>
    </body>
    </html>
    

    getClassName函数接收三个参数,其中第一个参数是必选的,后面两个参数可选。第一个参数是class名,第二个参数是父容器,缺省为body节点,第三个参数为DOM节点的标签名

  • 相关阅读:
    [转]给明年依然年轻的我们:欲望、外界、标签、天才、时间、人生目标、现实、后悔、和经历
    C#后台发送HTTP请求
    asp.net 用户控件
    P1414 又是毕业季II
    P2254 [NOI2005]瑰丽华尔兹
    P1081 开车旅行
    P1084 疫情控制
    P1852 [国家集训队]跳跳棋
    P1074 靶形数独
    平时二十三测
  • 原文地址:https://www.cnblogs.com/hxh-hua/p/3202137.html
Copyright © 2011-2022 走看看