继续我们今天的 Javascript 每日测试时间,今天的题目是
<ul id="demo">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script type="text/javascript">
var ul = document.getElementById('demo');
var liList = ul.getElementsByTagName('li');
for (var i = 0; i < liList.length; ++i) {
ul.removeChild(liList[i]);
}
</script>
请问脚本执行的结果是什么?
「 在 PPK 这本书中提及过 ,getElementsByTagName(tag)返回的 HTML 数组 是会自己动态更新的,并非静态的列表。」 -- from 明城
「更正一下,其实更准确的表述,getElementsByTagName(tag)返回的是 NodeList, 而不是 Array 。」 -- from 小马
如何避免这样的问题?其一,可以换一种循环方式,使用 --i,或者 while 循环,只要代码清晰可读。比如
for(var i = liList.length - 1; i >= 0; i--) {
ul.removeChild(liList[i]);
}
这样就可以解决上述的问题( 来源 )。
其二,是看情况。比较极端的例子,比如是希望把所有子节点都清除的话,可以直接使用 玉伯 提供的方法
parentNode.innerHTML = '';
有关 innerHTML 效率问题,以目前的电脑硬件而言,排除异常复杂的页面或者逻辑,性能方面应该是非常理想的。
「 当然,有关 innerHTML 效率方面,还可以改进提高 」 -- from 圆心。
"getElementsByTagName(tag)返回的 HTML 数组 是会自己动态更新的"
自己动态更新这种说法好像夸张了点,只是liList是一个对象引用,每次引用都会重
while(liList.length){
ul.removeChild(liList[liList.length-1])<br />}
这样搞好一点
已经快把这些原生api都忘了,用mootools,jQuery什么的太长了