Javascript 每日测试 - 第八期

作者：手气不错 发布时间：July 16, 2008 分类：JavaScript

继续我们今天的 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 圆心。

已有 3 条回复

  1. Lunatic Sun July 16th, 2008 at 05:32 pm #1
    Lunatic Sun

    "getElementsByTagName（tag）返回的 HTML 数组 是会自己动态更新的"



    自己动态更新这种说法好像夸张了点，只是liList是一个对象引用，每次引用都会重

  2. robben July 16th, 2008 at 11:10 pm #2
    robben

    while(liList.length){

    ul.removeChild(liList[liList.length-1])

    }

    这样搞好一点

  3. darkpilgrim July 17th, 2008 at 06:29 am #3
    darkpilgrim

    已经快把这些原生api都忘了，用mootools,jQuery什么的太长了

Yahoo 统计