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

上から下に繰り返します。

反復 1: 12 段落、インデックス = 0

インデックス 0 の段落が削除され、段落 1 がインデックス 0 になりました

2 回目の反復: 11 段落、インデックス = 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 に答える