1

ページには次の要素があります。

<div class="cl1 cl2"></div>
<div class="cl1 cl2"></div>
<div class="cl1 cl2"></div>

このコードを実行すると:

<script>
    var elems = document.getElementsByClassName("cl1");
    for (var i = 0; i < elems.length; i++) {
        console.log(i + ": " + elems[i].className);
    }
</script>

私は見えます：

0 cl1 cl2
1 cl1 cl2
2 cl1 cl2

コンソールで。

しかし、このコード:

<script>
    var elems = document.getElementsByClassName("cl1");
    for (var i = 0; i < elems.length; i++) {
        console.log(i + ": " + elems[i].className);
        elems[i].className = 'cl3'; // or = '' (removing all classes)
    }
</script>

与えます：

0 cl1 cl2
1 cl1 cl2

最初の実行時、および:

0 cl1 cl2

2回目の実行で。

すべての要素を変更しない理由は何ですか? elems.lengthに触れると減少しているのがわかりますelems[i].classNameが、その理由は何ですか？

var n = elems.lengthfor-loopを入れて変更i < nすると、Cannot read property 'className' of undefinedエラーが発生します。

問題は、最初からすべてのクラスを変更する方法ですか?

次のコードは非常にばかげていると思うからです。

var elems = document.getElementsByClassName("cl1");
while (elems.length) {
    for (var i = 0; i < elems.length; i++) {
        console.log(i + ": " + elems[i].className);
        elems[i].className = 'cl3';
    }
    elems = document.getElementsByClassName("cl1");
}
4

2 に答える 2

2

問題は、アイテムがライブNodeListであるということです。つまり、items.lengthにアクセスするたびに、リストが再評価されます。要素を削除すると、リストは短くなりますが、インデックスは保持されます。

最初にNodeListを配列に変換できます

    var items = [].slice.call(doc.getElementsByClassName('foo'));

DOM要素を削除しても、配列サイズは変更されません。

于 2012-07-28T22:34:05.200 に答える
1

このgetElementsByClassName関数は、配列ではなくNodeListを返します。NodeListオブジェクトはライブです—変更時にDOMを追跡します。（編集—すべてのNodeListオブジェクトがライブであるとは限りませんが、その関数から返されるオブジェクトはライブであることがわかります。）

最初の要素のクラスを変更すると、それは要素のリストの一部ではなくなります。したがって、「i」をインクリメントすると、1つスキップします。

NodeListオブジェクトを配列に変換するか（@ ama2の回答を参照）、選択したセットから要素を削除する「i」を変更することはできません。

于 2012-07-28T22:33:30.367 に答える