<!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>
动态集合和静态集合的不同
最新推荐文章于 2022-03-04 11:29:11 发布