获取元素的二种方法

方法一


<!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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容