getElement(s)Byxxxx与querySelector(All)的区别和使用场景

getElementById(id)：获取网页指定id名字的元素，返回一个对象；

getElementsByTagName()：获取网站指定标签名称的元素；

getElementsByName()：通过标签的name值获取元素；

getElementsByClassName()：通过class名获取元素；

 

document.querySelector()：返回匹配到的第一个元素；

document.querySelectorAll()：返回一个数组，哪怕只有一个元素

        getElement(s)Byxxxx获取的是动态集合，querySelector(All)获取的是静态集合。

例子（使用场景）：

 

以上代码，因为getElementsByTagName获取的是动态集合，第一次li取到里面的3个li后，每当你往ul里添加了新元素，li便会重新对文档进行查询，获取ul里的所有li。也就是getElement(s)Byxxxx获取的是动态集合，它总会随着dom结构的变化而变化。

 

 而使用使用querySelector(All)获取静态集的话就不会。querySelectorAll('li')获取到ul里所有li后，不管后续再动态添加了多少li，都是不会对其参数影响。