javascript - getElemensByTagName获取到的值每次都是重新计算的？

Question

我在做一个小功能，给一个按钮绑定click事件，每次点击后生成一个li元素，然后把li元素插入到ul的第一个位置，里面用到了getElementsByTagName方法,发现每次执行click事件时，取到的li集合的都是最新的，这是为什么？

window.onload = function() {
    var count = 0;
    var ul = document.getElementById("list");
    var lis = document.getElementsByTagName("li"); //取到的li实在click事件之前就已经确定的
    document.getElementById("btnAdd").onclick = function() {
        var li = document.createElement("li");
        li.innerText = count++;
        ul.insertBefore(li, lis[0]);//每次执行时lis的元素个数都会增加
    };
};

Answer 1

使用getElementsByTagName取得的是一个NodeList，并非普通的数组。
NodeList有个特性就是它永远是动态的，在你访问它时，每次都要重新遍历一遍文档。
所以，有时候你应该把你想取得的节点缓存起来，这样可以提升性能，也可以避免一些不必要的麻烦。