静态集合与动态集合的不同
静态集合与动态集合的不同
NodeList 有两种, 一种是动态集合, 一种是静态集合, 所谓动态集合, 主要是 Node.prototype.childNodes; 返回的子节点集合对文档的节点增删改会即时改变; 而静态集合则不会, 比如document.querySelectorAll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
var oUl=document.querySelector("ul");
var aLi1=document.getElementsByTagName("li");//获取的是动态集合
var aLi2=document.querySelectorAll("li");//获取的是静态集合，快照机制
// 删除某个元素的写法：元素的父元素.removeChild(元素)
// oUl.removeChild(aLi1[0]);
// 用第一个获取ali的方法（aLi1）将所有的li全部删除
// 问题：删不完，剩下2,4,6
// 原因：动态集合获取的元素，会随着元素的变化变量也发生变化。即就是删除一个长度就会减少一个，同时假设全部删除，后面的元素会往前移。但静态集合就不会
// for(var i=0;i<aLi1.length;i++){
// oUl.removeChild(aLi1[i]);
// }
for(var i=0;i<aLi2.length;i++){
oUl.removeChild(aLi2[i]);
}
// 另一种解决办法
var aLilength=aLi1.length;
for(var i=0;i<aLilength;i++){
oUl.removechild(aLi1[aLi1.length-1]);
}
</script>
</body>
</html>
下一篇：
C语言数据结构课设学生成绩管理系统