[解決済み] クラス名で要素を取得するには？重複

2022-03-09 05:12:51

質問

JavaScriptを使用すると、以下の構文でidで要素を取得することができます。

var x=document.getElementById("by_id");

クラス単位で要素を取得するために、以下のようにしてみました。

var y=document.getElementByClass("by_class");

しかし、結果的にエラーになりました。

getElementByClass is not function

クラスによって要素を取得するにはどうすればよいですか？

DOM関数の名前は、実は getElementsByClassName ではなく getElementByClassName というのは、ページ上の複数の要素が同じクラスを持つことができるからです。 Elements .

この戻り値は、NodeListのインスタンス、または、NodeListのスーパーセットとなります。 NodeList (のインスタンスを返します（例えばFFは HTMLCollection ). いずれにせよ、返り値は配列のようなオブジェクトです。

var y = document.getElementsByClassName('foo');
var aNode = y[0];

もし、何らかの理由で必要を配列として返したい場合、そのマジックである length プロパティを使えば簡単にできます。

var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);

としてヤクルト提案された querySelector('.foo') と querySelectorAll('.foo') が望ましいと思いますが、caniuse.comによると、実際、これらの方がよりよくサポートされています（93.99% vs 87.24%）。