querySelectorAll メソッドと getElementsBy* メソッドは何を返しますか?

Question

getElementsByClassName (および getElementsByTagName や querySelectorAll などの同様の関数) は getElementById で動作します。それも同じように？要素の配列を返しますか?

私が尋ねる理由は、getElementsByClassName を使用してすべての要素のスタイルを変更しようとしているからです。以下を参照してください。

//機能しません
document.getElementsByClassName('myElement').style.size = '100px';

//動作します
document.getElementById('myIdElement').style.size = '100px';

Answer 1

配列をオブジェクトとして使用し、getElementbyId と getElementsByClassName は:

• getElementbyId は Element オブジェクト < /a> を返します。その ID を持つ要素が見つからない場合は null を返します
• getElementsByClassName は live HTMLCollection< /a> を返します。一致する要素が見つからない場合、長さは 0
になる可能性があります。

getElementsByClassName

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

ElementByIdを取得

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

コードに次の行を含めます:

getElementByClassName は配列を返し、その配列 には スタイル プロパティを持たないため、 は期待どおりに動作しません。各 要素 は反復によってアクセスされます。 < /code> だからこそ関数 getElementById

が役に立ちます。この関数は直接オブジェクトを返します。したがって、

style プロパティにアクセスできるようになります。

Answer 2

#getElementById コードは、ID が一意である必要があるため機能します。そのため、関数は常に 1 つの要素 (見つからない場合は null) のみを返します )。

ただし、これらの方法は

getElementsByClassName、 getElementsByName、 getItemByTagName、および getElementsByTagNameNS 要素の反復可能なコレクションを返します。

メソッド名はヒントを提供します。

getElement は 単数形 を暗黙的に示し、getElements は 複数形 を暗黙的に示します。

Methods

querySelector も単一の要素を返し、querySelectorAll は反復可能なコレクションを返します。

反復可能なコレクションは、

NodeList または HTMLCollectiona>. です。

#getElementsByName と querySelectorAll はどちらも ノード リスト を返すように指定します。その他 getElementsBy * メソッド は HTMLCollection の戻り値を指定しますが、ブラウザのバージョンによってはこれが異なる方法で実装されることに注意してください。 < code> これら 2 つのコレクション型は、要素、ノード、または同様の型と同じプロパティを提供しません。そのため、

document.getElements

…(…)## から#style の読み取りに失敗した理由。 言い換えると、NodeList または HTMLCollection には style がなく、Element のみに style があります。

---

これらの「配列のような」コレクションは、アクセスするために反復処理する必要がある 0 個以上の要素のリストです。 配列と同じように反復処理できますが、" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /Global_Objects/Array とは異なることに注意してください。 ” rel="noreferrer">arrays。 最新のブラウザでは、

Array.from を使用でき、その後、forEach やその他の 配列メソッド (反復メソッドなど) を使用できます。 ： リーリー Array.from または iteration メソッドをサポートしていない古いブラウザでも、

Array.prototype.slice.call

を使用できます。 その後、実際の配列のように反復処理できます。 リーリー NodeList または

HTMLCollection

自体を反復処理することもできますが、ほとんどの場合、これらのコレクションは live (MDN Document ##) であることに注意してください。 #、DOM 仕様)、つまり、DOM が変更されると更新されます。 したがって、ループ中に要素を挿入または削除する場合は、誤って いくつかの要素をスキップしたり したり、 無限ループを作成したりしないように注意してください 。 MDN ドキュメントでは、メソッドがライブ コレクションを返すか静的コレクションを返すかを常に示す必要があります。 たとえば、NodeList は、最新のブラウザの forEach

などのいくつかの反復メソッドを提供します。 リーリー

単純な for ループを使用することもできます: リーリー ナレーション:

.childNodes は、

live

NodeList および < /a>.children を生成します。 live HTMLCollection を生成するため、これら 2 つのゲッターも注意して扱う必要があります。 DOM クエリを短くし、「要素」と「要素のコレクション」に抽象化レイヤーを作成する jQuery などのライブラリがあります。 リーリー