JavaScript之getElementsByTagName

作者: EndPein | 来源:发表于2019-11-24 23:42 被阅读0次

JavaScript之getElementsByTagName
Javascript getElementsByTagName(
元素相关操作
PHP编程实战15-8
JavaScript区别getElementByID,getEl
webView 抓取video标签链接
Dom8 js实现排序
2020-01-10
document.getElementsByTagName()/
DOM

getElementsByTagName

可以批量获取页面中的所有对应属性的数量，获取的是一个对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getElementsByTagName</title>
    <style>
          div {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function (){
            var aDiv = document.getElementsByTagName('div');
            for (var i = 0; i<aDiv.length;i++){
                aDiv[i].style.background = 'red';
            };
        };
    </script>
</head>
<body>

    <div></div>
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

小实战1，制作一个选项组，可以实现全选、不选、反选功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getElementsByTagName</title>
    <style>
          div {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function (){
            var oBtn1 = document.getElementById('btn1');
            var oBtn2 = document.getElementById('btn2');
            var oBtn3 = document.getElementById('btn3');
            var oDiv = document.getElementById('div1');
            var oCh = oDiv.getElementsByTagName('input');

            //全选
            oBtn1.onclick = function (){
                for (var i = 0 ; i <oCh.length; i++ ){
                    oCh[i].checked = true;
                };
            };
            //不选
            oBtn2.onclick = function(){
                for (var i = 0; i<oCh.length;i++){
                    oCh[i].checked = false;
                };
            };
            // 反选
            oBtn3.onclick = function(){
                for (var i = 0; i<oCh.length;i++){
                    if (oCh[i].checked==true){
                        oCh[i].checked = false;
                    } else {
                        oCh[i].checked = true;
                    }
                    
                };
            };
        };
    </script>
</head>
<body>

    <input id = "btn1" type="button" value="全选" /><br>
    <input id="btn2" type = "button" value="不选"/><br>
    <input id="btn3" type="button" value="反选"/><br>
    <div id="div1">
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
        <input type="checkbox" /><br>
    </div>



</body>
</html>

小实战2.制作一个选项卡，选择不同的按钮，展示不同的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getElementsByTagName</title>
    <style>
        #div1 .activate {
            background: yellow;
        }
        #div1 div {
            width: 200px;
            height: 200px;
            background: #CCC;
            border: 1px solid #999 ;
            display: none; 
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var aBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');

            for (var i = 0; i < aBtn.length ; i++){
                aBtn[i].index = i; //给每个按钮增加一个index序号属性
                aBtn[i].onclick = function(){

                    //清除所有的选中状态,将所有的div状态都调整为none
                    for (var i = 0; i<aBtn.length ; i++) {
                        aBtn[i].className = null;
                        aDiv[i].style.display = 'none';
                    };
                    //this是当前点击的按钮，标记当前选中的状态
                    this.className ='activate'; 
                    aDiv[this.index ].style.display = 'block';
                }
            };

        }

    </script>
</head>
<body>
    <div id="div1">
        <input type="button" class="activate" value="教育" />
        <input type="button" value="培训" />
        <input type="button" value="招生" />
        <input type="button" value="出国" />
        <div style="display: block;">1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>

    </div>



</body>
</html>