web-dev-qa-db-ja.com

JavaScriptでクラスを選択して追加する

可能であれば、クロスプラットフォームで、IDを追加できないコードでJavascriptのクラスを選択するにはどうすればよいですか（ただしJqueryではなく、MooToolsで問題ありません）。具体的には、以下のliにクラス「cf」を追加します。

HTML

<div class="itemRelated">
  <ul>
<li class="even">
<li class="odd">
<li class="even">

私はそれをいじろうとしたが、何かが足りない：

Javascript

 var list, i;
list = document.getElementsByClassName("even, odd");
for (i = 0; i < list.length; ++i) {
    list[index].setAttribute('class', 'cf');
}

JSFiddle

ps。この質問は驚くほど duplicates 、（another one ）の可能性がありますが、どの回答もそれを明確にしません。

javascriptdommootools
15
Yannis Dran

プレーンJavaScriptを使用：

var list;
list = document.querySelectorAll("li.even, li.odd");
for (var i = 0; i < list.length; ++i) {
   list[i].classList.add('cf');
}

Demo

古いブラウザの場合、これを使用できます：

var list = [];
var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; ++i) {
    if (elements[i].className == "even" || elements[i].className == "odd") {
        list.Push(elements[i]);
    };
}
for (var i = 0; i < list.length; ++i) {
    if (list[i].className.split(' ').indexOf('cf') < 0) {
        list[i].className = list[i].className + ' cf';
    }
}

Demo

Mootoolsの使用：

$$('.itemRelated li').addClass('cf');

Demo

または、特定のクラスをターゲットにしたい場合：

$$('li.even, li.odd').addClass('cf');

Demo

16
Sergio

いくつかの新しいブラウザーオブジェクトとメソッドを使用します。

Pure JS： Details：昔ながらの方法で、インデックス 'i'の要素を1つの大きなループで繰り返すよりも、最初に何かを宣言します。ここでは大きな科学はありません。 1つは、classListオブジェクトを使用することです。これは、配列内のクラスを追加/削除/チェックするスマートな方法です。

var elements = document.querySelectorAll('.even','.odd'),
    i, length;

for(i = 0, length = elements.length; i < length; i++) {
    elements[i].classList.add('cf');
}

Pure JS-2：詳細：document.querySelectorAllは、インデックス経由でアクセスできる配列のようなオブジェクトを返しますが、Arrayメソッドはありません。 Array.prototypeからsliceを呼び出すと、フェッチされた要素の配列が即座に返されます（おそらく最速のNodeList-> Array変換）。新しく作成された配列オブジェクトで.forEachメソッドを使用できます。

Array.prototype.slice.call(document.querySelectorAll('.even','.odd'))
 .forEach(function(element) {
    element.classList.add('cf');
});

Pure JS-3：詳細：これはv2に非常に似ています。[].mapは、mapメソッドを呼び出す空の配列を宣言することを除いて、Array.prototype.mapとほぼ同じです。短いですが、メモリを消費します（もう少し）。 .mapメソッドは、配列のすべての要素に対して関数を実行し、新しい配列を返します（関数内にreturnを追加すると、返された値が入力され、ここでは未使用になります）。

[].map.call(document.querySelectorAll('.even','.odd'), function(element) {
    element.classList.add('cf');
});

1つを選択して使用してください;）

3
veritas

他の人が要素の選択について言及しているように、.querySelectorAll()メソッドを使用する必要があります。 DOMは、クラスの追加、削除、切り替えをサポートする classList APIも提供します。

var list, i;
list = document.querySelectorAll('.even, .foo');
for (i = 0; i < list.length; i++) {
    list[i].classList.add('cf');
}

いつものようにIE9と以下はAPIをサポートしていません。これらのブラウザーをサポートしたい場合は、shimを使用できます。MDNには one があります。

2
undefined

querySelectorAllはIE8でサポートされていますが、getElementsByClassNameはサポートされていません。同時に2つのクラスを取得しません。それらのどれもiE7で機能しませんが、誰も気にしません。

その後は、classNameプロパティを繰り返して追加するだけです。

var list = document.querySelectorAll(".even, .odd");
for (var i = list.length; i--;) {
    list[i].className = list[i].className + ' cf';
}

[〜＃〜]フィドル[〜＃〜]

2
adeneo

私はこれが古いことを知っていますが、これを単純に行わない理由はありますか（潜在的なブラウザサポートの問題以外に）？

document.querySelectorAll("li.even, li.odd").forEach((el) => {
    el.classList.add('cf');
});

サポート： https://caniuse.com/#feat=es5

1
MuffinTheMan