[解決済み] querySelectorAllメソッドとgetElementsBy*メソッドは何を返すのですか？

質問

行う getElementsByClassName (といった類似の関数 getElementsByTagName と querySelectorAll と同じ働きをします。 getElementById それとも、要素の配列を返すのでしょうか？

なぜこのような質問をするかというと、私は、すべての要素のスタイルを getElementsByClassName . 下記をご覧ください。

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

解決方法は？

あなたの getElementById のコードは、ID が一意でなければならないため、関数が常に正確に1つの要素を返すので、機能します（あるいは null が見つからなかった場合）。

ただし、メソッド getElementsByClassName , getElementsByName , getElementsByTagName および getElementsByTagNameNS は、反復可能な要素のコレクションを返します。

メソッド名がヒントになります。 getElement を意味します。 単数 一方 getElements を意味します。 複数 .

メソッド querySelector も1つの要素を返します。 querySelectorAll は反復可能なコレクションを返す。

反復可能なコレクションは NodeList または HTMLCollection .

getElementsByName そして querySelectorAll を返すように指定されています。 NodeList もう一方の getElementsBy* メソッド を返すように指定されています。 HTMLCollection ただし、ブラウザのバージョンによっては、この実装が異なる場合がありますので、ご注意ください。

これらのコレクションタイプは両方とも、ElementやNodeなどのタイプが提供するようなプロパティを提供しません。 style から document.getElements ... ( ... ) が失敗する。 言い換えると、次のようになります。 NodeList または HTMLCollection がない場合は style のみです。 Element には style .

これらの「配列のような」コレクションは、0個以上の要素を含むリストであり、それらにアクセスするためには、繰り返し処理を行う必要があります。 配列と同じように繰り返し処理することができますが、このコレクションは 異なる から Array s .

モダンブラウザでは、これらの反復記号を適切な配列に変換することができます。 Array.from を使用することができます。 forEach など 配列のメソッド（例：イテレーションメソッド :

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

をサポートしていない古いブラウザでは Array.from やイテレーションメソッドを使用することができます。 Array.prototype.slice.call . そうすれば、本当の配列と同じように、それを繰り返し処理することができます。

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

を反復処理することもできます。 NodeList または HTMLCollection を使用することができますが、ほとんどの場合、これらのコレクションは 生きる ( MDNドキュメント , DOM仕様 つまり、DOMの変更に伴って更新されるのです。 つまり、DOM の変更に伴って更新されます。したがって、ループ中に要素を挿入したり削除したりする場合は、誤って いくつかの要素をスキップする または 無限ループを作成する . MDN のドキュメントでは、メソッドがライブコレクションを返すのか、スタティックコレクションを返すのか、常に注意する必要があります。

例えば NodeList は、次のような反復処理メソッドを提供しています。 forEach を、最近のブラウザでは

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

シンプルな for ループを使用することもできます。

var elements = document.getElementsByClassName("myElement");

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

などのライブラリがあります。 jQuery DOMクエリを少し短くし、「1つの要素」と「要素の集まり」を抽象化するレイヤーを作成します。

$(".myElement").css("size", "100px");