淺談querySelector和getElementById之間的區別

逝去的初夏c發表於2020-11-06

前言：

最近學到前端一些知識，看到很多視訊上許多老師都用的是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

 

相關文章