首页 > getElemensByTagName获取到的值每次都是重新计算的?

getElemensByTagName获取到的值每次都是重新计算的?

我在做一个小功能,给一个按钮绑定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的元素个数都会增加
    };
};

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

【热门文章】
【热门文章】