querySelectorquerySelectorAll的用法和getElementBy大致一样,获取的时候带上符号,getElementBy获取的是元素的动态集合,querySelector获取的是元素的静态集合

<red>但是需要注意:getElementBy系列和querySelector系列的区别</red>

比如,我们写一个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

<red>重新用querySelector获取一遍元素</red>

<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,都是不会对其参数影响