在使用querySelectorAll操作dom元素 的时候,我发现一个问题,先看下面这段代码:
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<script>
window.function(){
var items =document.querySelectorAll('.item');
console.log(items.length);//输出结果为3
document.body.innerHTML+="<div class='item'></div>";
console.log(items.length);//输出结果还是3
for (var i=0;i<items.length;i++){
items[i].style.background="pink";//样式不起作用
}
}
</script>
从上面代码看出,如果增加了一个div,再打印通过query Selector获取的items长度,是不变的,并且,给每个item设置背景颜色也不起作用,这就是我所说的坑。因此,需要再通过querySelectorAll来获取才能令长度为4,样式起作用
window.function(){
var items =document.querySelectorAll('.item');
console.log(items.length);//输出结果为3
document.body.innerHTML+="<div class='item'></div>";
items =document.querySelectorAll('.item');
console.log(items.length);//输出结果为4
for (var i=0;i<items.length;i++){
items[i].style.background="pink";//样式起作用
}
}