淺談querySelector和getElementById之間的區別

  • 2020 年 11 月 6 日
  • 筆記

前言：

最近學到前端一些知識，看到很多影片上許多老師都用的是querySelector而部分老師用的是getElementById，我就很疑惑，這兩有啥區別，都是選擇器，於是百度了一下明白了，querySelector選出來的元素及元素數組是靜態的，而getElementById這種方法選出的元素是動態的。

寫了個例子

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
ar ul=document.querySelector('ul');
        var list=ul.querySelectorAll('li');
        for(var i=0;i<list.length;i++){
            ul.appendChild(document.createElement('li'));
        }//這個時候就創建了3個新的li，添加在ul列表上。
       
 console.log(list.length) 
//輸出的結果仍然是3，不是此時li的數量6

</script>
var ul=document.getElementsByTagName('ul')[0];
        var list=ul.getElementsByTagName('li');
        for(var i=0;i<5;i++){
            ul.appendChild(document.createElement('li'));
        }   
        console.log(list.length)//此時輸出的結果就是8

 

VirMach 便宜 VPS

QNews

QNews