11

クラス名を別の名前に変更したいだけです。

使ってみました

document.getElementsByClassName("current").setAttribute("class", "none");

しかし、うまくいきません。私はjavascriptが初めてです。

4

2 に答える 2

23

説明

document.getElementsByClassNameHTMLCollection要素の配列だけでなく、 を返します。つまり、コレクションはライブであるため、この特定の状況では、クラスが「現在」のすべての要素を常に保持するという要件が保持されます。

偶然にもclass、コレクションが依存するものを削除しているため、コレクションが更新されています。valueたとえば、ループ内でプロパティを設定している場合は、まったく異なりますclass。「現在」が削除されていないため、コレクションは影響を受けません。などのクラスを追加する場合もまったく異なりますがel.className += " none";、そうではありません。

MDN ドキュメントからの優れた説明:

HTML DOM の HTMLCollection はライブです。基になるドキュメントが変更されると、それらは自動的に更新されます。

アプローチ1

この大混乱をすべて克服する簡単な方法は、逆方向にループすることです。

var els = document.getElementsByClassName('current'),
    i = els.length;

while (i--) {
    els[i].className = 'none';
}

デモ: http://jsfiddle.net/fAJgT/

(デモのコードには がありsetTimeout、最初は元の境界線の色が表示され、1.5 秒後に変化することがわかります)

これは、コレクション内の最後のアイテムを変更するため機能します。変更された (そして自動的に削除された) 場合は、その前のアイテムに移動します。そのため、自動削除による影響はありません。

同じことを行う別のセットアップは次のとおりです。

for (i = els.length; i >= 0; i--) {

アプローチ 2

別の答えから、最初に見つかったアイテムを継続的に操作できることがわかりました。特定のクラスを削除すると、要素がコレクションから削除されるため、最初のアイテムが常にコレクション内の新しいアイテムであることが保証されます。したがって、lengthプロパティをチェックすることは、チェックするのに安全な条件である必要があります。次に例を示します。

var els = document.getElementsByClassName('current');
while (els.length) {
    els[0].className = 'none';
}

デモ: http://jsfiddle.net/EJLXe/

これは基本的に、「コレクションにアイテムがまだある間に、最初のアイテムを変更します (変更後に削除されます)」と言っています。ただし、コレクションを変更することになるため、特に機能するため、その方法を使用することはお勧めしません。特定のクラスを削除していない場合、または通常の配列または非ライブ コレクション ( spliceing なし)を使用している場合、これは無限ループになります。

アプローチ 3

別のオプションはslice、コレクションを配列に (浅いコピー) し、それを通常どおりループすることです。しかし、それを行う理由/改善は見当たりません。とにかく例を次に示します。

var els = document.getElementsByClassName('current'),
    sliced = Array.prototype.slice.call(els), i;

for (i = 0; i < sliced.length; i++) {
    sliced[i].className = 'none';
}

デモ: http://jsfiddle.net/LHe95/2/

アプローチ 4

最後に、使用できますdocument.querySelector-非ライブを返しますNodeList（したがって、通常のようにループできます） 。ブラウザーでのサポートも、実際よりも優れてdocument.getElementsByClassNameいます。次に例を示します。

var els = document.querySelectorAll('.current'),
    i;

for (i = 0; i < els.length; i++) {
    els[i].className = 'none';
}

デモ: http://jsfiddle.net/xq8Xr/

参考文献:

于 2013-05-12T19:11:24.730 に答える