JavaScript 获取标签的6种方法

1.利用document.getElementById(‘id名’)；
<body>
    <div id="box"></div>
    <script>
        var div = document.getElementById('box');\\获取到了div
    </script>    
</body>
2.利用document.getElementsByName(‘name名’);
<body>
    <div name="box"></div>
    <script>
        var div = document.getElementsByName('box')[0];
                //获取到了div
    </script>
</body>

3.利用document.getElementsByTagName(‘标签名’);
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
      //获取到了div 
      //element加了s表示是集合 获取的是一组元素 是伪数组
      //可以在获取元素后面加[写你想要的那个元素 数字表示 下标是0]; 
        var div = document.getElementsByTagName('div')[0];
        for(i=0;i<arr.length;i++){  
        //循环获取表单input的值  
        //alert(arr[i].value);  
        //循环获取属性的值  
        //alert(arr[i].getAttribute("name"));  
        } 
               
    </script>
</body>
</html>
4.利用document.getElementsByClassName(‘class名’); 有兼容性 ie9之前的不能用
<body>
    <div class = "box">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        var div = document.getElementsByClassName('box')[0];
                //利用class名获取元素
    </script>
</body>
</html>
5.利用document.querrySelector(‘可以写任何选择器 只能选择一个’); 兼容性 ie8以后都能适用
<body>
    <div class = "box">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        var div = document.querySelector('.box')[0];
        //获取class 要加 .
        //获取id    要加#
    </script>
</body>
</html>
6.利用document.querrySelectorAll(‘可以写任何选择器，可以选择多个’); 兼容性 ie8以后都能适用
<body>
    <div class = "box">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        var div = document.querySelectorAll('.box')[0];
        //是个集合可以选择多个
    </script>
</body>
</html>
转载：js获取标签的6种方法_Swordsman-Wang的博客-CSDN博客_js获取标签
https://blog.csdn.net/weixin_45894479/article/details/115438426