我在做一个小功能,给一个按钮绑定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有个特性就是它永远是动态的,在你访问它时,每次都要重新遍历一遍文档。
所以,有时候你应该把你想取得的节点缓存起来,这样可以提升性能,也可以避免一些不必要的麻烦。