querySelector和getElementById方法的区别

今天看别人的一个项目，发现使用选择符时用了querySelector,紧接着下面又使用了appendChild，我记得以前学习的时候querySelector获取到的是静态的，不能动态的增加子元素

结果发现运行后发现确实可以添加元素div，于是又去百度了一大堆，终于搞明白了

query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。
什么叫静态的？意思是指选出的所有元素的数组，不会随着文档操作而改变。

注意，此时所说的是选出的所有元素的数据是静态的，也就是说增加元素后，数组的长度不会变，但是增加的元素是实际存在的
 

    <ul>
        <li>李明</li>
        <li>张飞</li>
        <li>王五</li>
    </ul>

var 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

反观getElement的方法

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)//此时输出的结果就是3+5=8

记录下来增加记忆