1 
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<p>1
<p>2
<p>3
<p>4
<p>5
<p>6
<p>7
<p>8
<p>9
<p>10
<p>11
<p>12
<script>
    // When the document is clicked, codes below should remove all the paragraphs in the page.
    // There are 12 paragraphs in the page, but codes below can just remove 6 of them.
    document.addEventListener('click', function () {
        var i, allParagraphElements = document.getElementsByTagName('p');
        console.log('allParagraphElements.length: ' + allParagraphElements.length);
        for (i = 0; i < allParagraphElements.length; i += 1) {
            console.log('i: ' + i);
            allParagraphElements[i].parentNode.removeChild(allParagraphElements[i]);
        }
    }, false);
</script>

请参阅 jsFiddle 上的代码：http: //jsfiddle.net/7NmRh

我该如何解决这个问题？谢谢你。

4

2 回答 2

5

你从上到下迭代：

迭代一： 十二段，index = 0

索引 0 处的段落被删除，第 1 段现在位于索引 0

第二次迭代： 11个段落，index = 1

索引 1 处的段落被删除，第 2 段现在位于索引 1

你明白出了什么问题吗？你只删除了一半的段落

反过来迭代，所有段落都被删除

JSFIDDLE

于 2012-07-30T13:43:23.910 回答
3

.getElementsByTagName返回一个活动节点列表，当您更改它所代表的底层子树时，该节点列表会自动更新。基本上，当您删除元素时，它.length也会发生变化，并且循环将“过早地”结束。

您可以使用.querySelectorAll来获取静态节点列表。

http://jsfiddle.net/7NmRh/1/

allParagraphElements = document.querySelectorAll('p');

​ 您还可以将节点列表转换为数组，其行为也类似于静态节点列表：

allParagraphElements = [].slice.call( document.getElementsByTagName('p') );

http://jsfiddle.net/7NmRh/4/

于 2012-07-30T13:42:17.403 回答