先上demo代码
3
928
123
456
789
abc
def
var test=document.getElementById('test');
var arr=test.getElementsByTagName('li');
console.log(arr);
console.log(arr.length);
for (var i = 0; i <= arr.length; i++) {
test.removeChild(arr[i]);
};id为test的容器中有若干个li标签，获取li标签存到arr数组中，然后使用for循环test.removeChild(arr[i])删除所有的li标签，逻辑很简单，下面是我的疑问：
1.li标签按道理应该全部被移除，但是页面中还是剩下两个并没有被移除
2.控制台打印arr.length为5，但是arr打开里面只有两个
参考了w3chool的标准，发现并没有提及removeChild会有哪些兼容性的问题，求路过高手指点
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
1)var arr=test.getElementsByTagName('li');
获取的NodeList对象时一个动态集合对象，而非静态的
什么意思呢，就是当你添加或删除一个元素时，arr对象时会立马变化的
2)你在for循环中每次都在计算长度arr.length
那么结合1)出现的结果是，你删除一个元素，长度就会少1，那么后面的元素你就永远删除不了
你算下，初始长度为5，你可以删除3个
getElementsByTagName得到的是一个NodeList数组，它是随着DOM结构变化动态变化的，所以当你remove i=0时，这个数组的长度就减1， <li>456</li>就成了第一个子元素，此时i=1移除的就是<li>789</li>，同理，继续删除则会跳过abc。