BOM获取元素的几种方式

2.1如何获取页面元素

1. 根据id获取getElementById

   <div id="time">2023-08-01</div>
       <script>
           // 1.因为我们从文档页面从上往下加载,所以得先有标签,所以我们script写到标签下面
           // 2.get 获得element 元素 by 通过 
           // 3.参数id是大小写敏感的字符串
           // 4.返回的是一个元素对象
           var timer = document.getElementById('time');
           console.log(timer);
           console.log(typeof timer);
           // 5.   console.dir(timer)打印我们返回的元素对象 更好的查看里面的属性和方法
           console.dir(timer)
       </script>
   

2. 根据标签名获取

   使用getElementByTagName()方法返回带有指定标签名的对象的集合

   注意:

   1. 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
   2. 得到元素对象是动态的

    <ul>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
           <li>2</li>
       </ul>
       <script>
           // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的(只有length 下标这边属性 其他的push那些是没有的)
           var lis = document.getElementsByTagName('li');
           console.log(lis);
           console.log(lis[0]);
           // 2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
           for (let i = 0; i < lis.length; i++) {
         
         
               console.log(lis[i]);
               // 3.如果页面中只有一个li,返回的还是这个伪数组的形式
               // 4.如果页面中没有这个元素,返回的是空的伪数组形式
   
           }
       </script>
   

3. 通过HTML5新增的方法获取

   1. document.getElementByClassName(‘类名’);//根据类名返回元素对象的集合

      // 通过document.getElementsByClassName根据类名获取某些元素的集合
              var boxs = document.getElementsByClassName('box');
              console.log(boxs); //HTMLCollection(2) [div.box, div.box]
      

   2. document.querySelector(‘选择器’)//返回指定选择器第一元素对象,切记里面的选择器是需要加符号的 .box #nav 等

       // querySelector返回指定选择器的第一个元素对象
              var firstBox = document.querySelector('.box');
              console.log(firstBox);
              var nav = document.querySelector('#nav');
              console.log(nav); //div#nav
      

   3. document.querySelectorAll(‘选择器’)//根据指定选择器返回

       // querySelectorAll ()返回指定选择器所有元素对象的集合
              var allBox = document.querySelectorAll('.box');
              console.log(allBox);
              var lis = document.querySelectorAll('li');
              console.log(lis);
      

4. 特殊元素获取

   1. 获取body元素

      document.body //返回body元素对象

   2. 获取html对象

      document.documentElement //返回html元素对象