JS文档页面元素获取|没有比这更详细的了

根据id获取元素

使用document.getElementById(’【id名】’)

 <div id="demo"></div>
   <script>
       window.onload = function() {
           var a = document.getElementById('demo');
           console.log(a);
       }
   </script> 

根据标签名获取元素

使用document.getElementsByTagName(’【标签名】’)，获得的是一个数组
还可以使用document.getElementsByTagName(’【标签名】)[下标]获得元素

    <div id="demo" class="sd" name='demo1'></div> 
    <script>
       window.onload = function() {
            var a= document.getElementsByTagName('div');
           console.log(a);
           var b = document.getElementsByTagName('div')[0];
           console.log(b);
      }
   </script> 

根据name获取元素

使用document.getElementsByName(’【name】’)，获得的是一个数组
还可以使用document.getElementsByName(’【name】)[下标]获得元素

<div id="demo" class="sd" name='demo1'></div> 
    <script>
       window.onload = function() {
            var a = document.getElementsByName('demo1');
           console.log(a); 
           var b = document.getElementsByName('demo1')[0];
           console.log(b); 
      }
   </script> 

根据类名获取元素

使用document.getEblementsByClassName(’【类名】’)，获得的是一个数组
还可以使用document.getElementsByClassName(’【类名】)[下标]获得元素

    <div id="demo" class="sd" name='demo1'></div> 
    <script>
       window.onload = function() {
           var a = document.getElementsByClassName('sd');
           console.log(a);  
           var b = document.getElementsByClassName('sd')[0];
           console.log(b);  
      }
   </script> 

根据选择器获取元素

使用document.querySelector(’【类名/id名/元素】’)，只返回第一个
而使用document.querySelectorAll(’【类名/id名/元素】)拿到的是全部，是一个列表

   <div id="demo" class="sd" name='demo1'></div> 
    <div id="demo">
        <span>我是第二个</span>
    </div>
    <script>
       window.onload = function() {
           var a = document.querySelector('div');    //元素  类选择器  id
           console.log(a);
           var b = document.querySelector('#demo');    //元素  类选择器  id
           console.log(b);
           var c = document.querySelectorAll('#demo');       //获得列表
           console.log(c);
      }
   </script>