3

クラス「黒」を持つHTML要素のリストがあります（他のクラスもあります）。「黒」を「白」に変換したい。次のコードを書きました。

var blacks = document.getElementsByClassName("black");
for (i = 0; i < blacks.length; i++)
    blacks[i].className = blacks[i].className.replace('black', 'white');

興味深いことに、1 つの要素が白に変わり、1 つの要素が要素の最後までスキップされます。つまり、順序が偶数の要素は変更されません。すべての黒人を変換するために何が欠けていますか?

4

2 に答える 2

7

document.getElementsByClassNameそれが表すDOMの一部に変更を加えると、自動的に更新されるライブNodeListを返します。あなたはそれを静的リストのように扱っています。それを配列に変換することでそれを行うことができます：

var blacks = [].slice.call(document.getElementsByClassName("black"));

次のこともできると思いました：

var blacks = document.querySelectorAll(".black"); //NodeList but static
于 2012-07-03T18:17:10.343 に答える
2

ライブ nodeList であることについてのコメントに加えblacksて、ループを単純にデクリメントすることで、配列への変換を回避できます。

var blacks = document.getElementsByClassName("black");
for (var i = blacks.length -1 ; i >= 0; --i) {
    blacks[i].className = blacks[i].className.replace('black', 'white');
}​

JS フィドルのデモ。

于 2012-07-03T18:20:31.787 に答える