querySelector和querySelectorAll的用法和getElementBy大致一樣，獲取的時候帶上符號，getElementBy獲取的是元素的動態集合，querySelector獲取的是元素的靜態集合。

但是需要注意：getElementBy系列和querySelector系列的區別

比如，我們寫一個for迴圈，每次獲取li標籤的時候，ul生成一個li子元素

<ul id="ul">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script>
    var ul = document.getElementById('ul');
    var li = document.getElementsByTagName('li');

    for(var i = 0;i < li.length; i++) {
        ul.appendChild(document.createElement('li'))
    };

    console.log(li.length);
    // 陷入死迴圈
</script>
 

用i < li.length來進行判斷時，會導致瀏覽器死迴圈，因為迴圈一次的時候，瀏覽器又重新獲取li標籤陣列，每呼叫一次就會重新對文件進行查詢，就會進入死迴圈

進行修改：把i < li.length改成i < 3，把li標籤陣列靜態化，然後列印

conosle.log(li.length) // 6
重新用querySelector獲取一遍元素

<ul id="ul">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script>
    var ul = document.querySelector('ul');
    var li = document.querySelectorAll('li');

    for(var i = 0;i<li.length;i++) {
        ul.appendChild(document.createElement('li'))
    };

    console.log(li.length);
    // 輸出對結果是原來的li.length = 3，而不是增加後的 6
</script>
 

靜態集合體現在querySelectorAll('li')獲取到ul裡所有li後，不管後續再動態添加了多少li，都是不會對其引數影響

本文連結: https://shuxhan.com/20201116-get-query
歡迎任何形式的轉載，但請務必註明出處。
由於筆者水平有限，如果文章或程式碼有表述不當之處，還請不吝賜教。