web-dev-qa-db-ja.com

純粋なJavaScriptの要素からクラスを削除する方法は？

クラス名「widget」および「hover」を持つすべての要素を選択し、これらの要素からクラス「hover」を削除する方法を知りたいです。

クラス「widget」および「hover」を持つすべての要素を選択する次のJavaScriptコードがあります。

var elements = document.getElementsByClassName('widget hover');
console.log(elements);

これは動作しているようで、次のようなものを出力します（エラーなし）：

[div#.widget...

問題は、クラス「ホバー」を削除しようとすると、エラーが発生することです。

var elements = document.getElementsByClassName('widget hover');
console.log(elements);
elements.classList.remove("hover");

この出力：

[item: function]
length: 0
Uncaught TypeError: Cannot call method 'remove' of undefined

誰が私が間違っているのか教えてもらえますか？


jQueryで動作していることに注意してください。

$('.widget.hover').removeClass('hover');

...しかし、私は純粋なJavaScriptのソリューションを探しています。

javascriptgetelementsbyclassname
50
Andrew
_var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.classList.remove("hover");
});
_

IE9に_.classList_をパッチできます。それ以外の場合は、_.className_を変更する必要があります。

_var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.className = el.className.replace(/\bhover\b/, "");
});
_

.forEach()にはIE8のパッチも必要ですが、それはとにかく一般的です。

70
cookie monster

要素を見つける：

var elements = document.getElementsByClassName('widget hover');

elementsはlive配列であり、すべてのdomの変更を反映するため、単純なwhileループですべてのhoverクラスを削除できます。

while(elements.length > 0){
    elements[0].classList.remove('hover');
}
15
Veikko Karsikko

elementsはDOMオブジェクトの配列です。このようなことをする必要があります

for (var i = 0; i < elements.length; i++) {
   elements[i].classList.remove('hover');
}

つまり、要素コレクションを列挙し、コレクション内の各要素に対してremoveメソッドを呼び出します

9
nemo

これは役立つかもしれません

let allElements = Array.from(document.querySelectorAll('.widget.hover'))
for (let element of allElements) {
  element.classList.remove('hover')
}
1
Faiyaz Shaikh