querySelectorAll メソッドと getElementsBy* メソッドは何を返しますか?
P粉060112396
2023-08-24 19:45:56
<p><code>getElementsByClassName</code> (および <code>getElementsByTagName</code> や <code>querySelectorAll</code> などの同様の関数) は <code>getElementById</code> で動作します。それも同じように？要素の配列を返しますか? </p>
<p>私が尋ねる理由は、<code>getElementsByClassName</code> を使用してすべての要素のスタイルを変更しようとしているからです。以下を参照してください。 </p>
<pre class="brush:php;toolbar:false;">//機能しません
document.getElementsByClassName('myElement').style.size = '100px';
//動作します
document.getElementById('myIdElement').style.size = '100px';</pre></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
配列をオブジェクトとして使用し、
getElementbyIdとgetElementsByClassNameは:getElementbyIdは Element オブジェクト を返します。その ID を持つ要素が見つからない場合は null を返しますgetElementsByClassNameは live HTMLCollection を返します。一致する要素が見つからない場合、長さは 0getElementsByClassName
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 は配列を返し、その配列 には
が役に立ちます。この関数は直接オブジェクトを返します。したがって、スタイルプロパティを持たないため、 は期待どおりに動作しません。各 要素は反復によってアクセスされます。だからこそ関数getElementByIdstyle
プロパティにアクセスできるようになります。#getElementById
ただし、これらの方法はコードは、ID が一意である必要があるため機能します。そのため、関数は常に 1 つの要素 (見つからない場合は null) のみを返します)。getElementsByClassName
メソッド名はヒントを提供します。、 getElementsByName、 getItemByTagName、および getElementsByTagNameNS要素の反復可能なコレクションを返します。getElement
Methodsは単数形 を暗黙的に示し、getElementsは複数形 を暗黙的に示します。querySelector
反復可能なコレクションは、も単一の要素を返し、 a>querySelectorAllcode> は反復可能なコレクションを返します。NodeList
または HTMLCollectiona>.一个> です。#getElementsByName
document.getElementsとquerySelectorAllはどちらもノード リスト を返すように指定します。その他getElementsBy * メソッドはHTMLCollection の戻り値を指定しますが、ブラウザのバージョンによってはこれが異なる方法で実装されることに注意してください。 これら 2 つのコレクション型は、要素、ノード、または同様の型と同じプロパティを提供しません。そのため、…
(…)## から#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
Array.prototype.slice.callを使用でき、その後、forEach やその他の配列メソッド (反復メソッドなど) を使用できます。 ：リーリー Array.from または iteration メソッドをサポートしていない古いブラウザでも、を使用できます。 その後、実際の配列のように反復処理できます。 リーリー
HTMLCollection自体を反復処理することもできますが、ほとんどの場合、これらのコレクションは
などのいくつかの反復メソッドを提供します。 リーリーlive(MDN Document ##) であることに注意してください。 #、DOM 仕様)、つまり、DOM が変更されると更新されます。 したがって、ループ中に要素を挿入または削除する場合は、誤って いくつかの要素をスキップしたり したり、 無限ループを作成したりしないように注意してください 。 MDN ドキュメントでは、メソッドがライブ コレクションを返すか静的コレクションを返すかを常に示す必要があります。 たとえば、NodeList は、最新のブラウザの forEach単純な
forループを使用することもできます:リーリーナレーション:.childNodes
liveは、NodeList
および.children を生成します。liveHTMLCollectionを生成するため、これら 2 つのゲッターも注意して扱う必要があります。DOM クエリを短くし、「要素」と「要素のコレクション」に抽象化レイヤーを作成する jQueryなどのライブラリがあります。 リーリー