动态NodeList和静态NodeList的区别/getElemensByTagName和querySelectorAll的区别

在一些情况下，NodeList是动态的，即文档中一些节点发生了变化，这个NodeList也会发生变化，例如document.getElementsByTagName()等函数获取的NodeList

在某些情况下，NodeList是静态的，即文档中一些节点发生了变化，这个NodeList不会发生变化，例如document.querySelectorAll()等函数获取的NodeList

---

在网页中插入js代码

动态NodeList时

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
    document.body.appendChild(document.createElement("div"));
}

代码表示：当页面中至少有一个div的时候，i会小于div的个数，函数执行，增加一个div，i++，但因为获取的NodeList是动态的，document.getElementsByTagName()的函数获取的NodeList会发生变化，divs.length也会发生变化。最终会导致该函数是一个死循环。

---

静态NodeList时

var divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
    document.body.appendChild(document.createElement("div"));
}

代码表示：当页面中至少有一个div的时候，i会小于div的个数，函数执行，增加一个div，i++，但因为获取的NodeList是静态的，document.querySelectorAll()的函数获取的NodeList不发生变化，divs.length也不会发生变化。最终会导致该函数不是死循环。

---

实际上，getElemensByTagName比querySelectorAll快的本质是创建并返回动态NodeList的速度比静态NodeList快。

因为动态NodeList不需要预先获取所有的信息,返回的只是指针，而静态NodeList从一开始就需要取得并封装所有相关数据，即伪数组。