美文网首页
获取元素的二种方法

获取元素的二种方法

作者: 小小彭007 | 来源:发表于2017-04-25 06:15 被阅读0次

    方法一

    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    /*
    #list {}        var oUl = document.getElementById('list');                          静态方法
    
    li {}                   document.getElementsByTagName('li');                                    动态方法
    #list li {} var aLi = oUl.getElementsByTagName('li');
                                // aLi => [ li, li, li ]     元素的集合
                                aLi.length                              3
                                aLi[0]
                                // 在用 TagNasme 的时候,必须要加上:[]
    */
    window.onload = function (){
        //  var oUl = document.getElementById('list');
        var oUl = document.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        
        // document.getElementsByTagName('li');
        
        // alert( aLi.length );
    };
    </script>
    </head>
    
    <body>
    
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <ol>
        <li></li>
        <li></li>
    </ol>
    
    </body>
    </html>
    
    

    方法二

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    
    <script>
    window.onload = function (){
        // document.title = 123;
        // document.body.innerHTML = 'abc';
        var aBtn = document.getElementsByTagName('input');
        
        // alert(aBtn.length);
        
        document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />';
        
        // alert(aBtn.length);
        aBtn[0].onclick = function (){ alert(1); };
        aBtn[1].onclick = function (){ alert(1); };
        aBtn[2].onclick = function (){ alert(1); };
        
        // 重复执行某些代码
        // 每次执行的时候,有个数字在变化
    };
    </script>
    
    </head>
    
    <body>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:获取元素的二种方法

          本文链接:https://www.haomeiwen.com/subject/avmmzttx.html