[解決済み] 純粋なJavaScriptで要素からクラスを削除するには？

質問

クラス名 "widget" と "hover" を持つすべての要素を選択し、これらの要素からクラス "hover" を削除する方法を知りたいのですが、どうすればよいでしょうか。

私は、クラス "widget"と "hover"を持つすべての要素を選択する次のJavaScriptコードを持っています。

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

これはうまくいくようで、以下のように出力されます（エラーなし）。

[div#.widget... 

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

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で解決策を探しています。

どのように解決するのですか？

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

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

パッチを適用することができます .classList を IE9 に組み込むことができます。そうでない場合は .className .

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

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

は .forEach() も IE8 用のパッチが必要ですが、いずれにせよこれはかなり一般的なことです。