js原生操作dom

• 查询

  getElementsBy*和querySelectorAll的区别。

  • example1

      <div>First div</div>
    
      <script>
        let divs = document.getElementsByTagName('div');
        alert(divs.length); // 1
      </script>
    
      <div>Second div</div>
    
      <script>
        alert(divs.length); // 2
      </script>

  • example2

    <div>First div</div>
    
    <script>
      let divs = document.querySelectorAll('div');
      alert(divs.length); // 1
    </script>
    
    <div>Second div</div>
    
    <script>
      alert(divs.length); // 1
    </script>

    可以发现，getElementsBy*类似于动态，querySelectorAll是一个静态的检索。