JavaScript における querySelector と querySelectorAll、getElementsByClassName と getElementById の違い
P粉442576165
2023-08-21 21:45:39
<p><code>querySelector</code>、<code>querySelectorAll</code>、<code>getElementsByClassName</code>、<code>getElementById</の違いを知りたいです。コード>何が違うのですか? </p>
<p>このリンクから、<code>querySelector</code> を使用すると、<code>document.querySelector(".myclass")</code> を記述してクラス名<のファイルを取得できることがわかりました。 ;code>myclass、および document.querySelector("#myid")
を使用して、ID myid
を持つ要素を取得します。ただし、<code>getElementsByClassName</code> と <code>getElementById</code> を使用すると、この機能はすでに実現できます。どちらを優先すべきでしょうか? </p>
<p>また、私は XPages で作業していますが、ID は動的に生成され、コロンが含まれており、この <code>view:_id1:inputText1</code> のようになります。そのため、<code>document.querySelector("#view:_id1:inputText1")</code> と記述すると、機能しません。しかし、<code>document.getElementById("view:_id1:inputText1")</code> を書くと、それは機能します。なぜこれが起こっているのか何か考えはありますか? </p>
この回答では、
querySelector
およびquerySelectorAll
を querySelector* と呼び、getElementById
、getElementsByClassName
、getElementsByTagName とします。
とgetElementsByName
は getElement* と呼ばれます。この情報の多くは仕様で確認でき、その多くは私が執筆中に実行したさまざまなベンチマークから得られました。仕様: https://dom.spec.whatwg.org/
主な違い
querySelector
とgetElementById
は両方とも 1 つの要素を返します。querySelectorAll
とgetElementsByName
はどちらも NodeList を返します。getElementsByClassName
とgetElementsByTagName
はどちらも HTMLCollection を返します。 NodeList と HTMLCollection はどちらも要素のコレクションと呼ばれます。これらの概念を以下の表にまとめます。
リーリー詳細、ヒント、例
HTMLCollection は NodeList ほど配列らしくなく、.forEach() をサポートしません。この問題を回避するにはスプレッド演算子が役立つことがわかりました:
[...document.getElementsByClassName("someClass")].forEach()
これらの関数はすべて、要素ごとに、またグローバルに
document
からアクセスできます。ただし、getElementById
とgetElementsByName
は例外で、document# でのみ利用可能です。 ## に実装されています。
querySelectorAll
は、各ステップで NodeList または HTMLCollection から要素を選択する必要があるため、通常はオーバーライドが困難です。たとえば、次のコード
は機能しません :document.getElementsByClassName("someClass").getElementsByTagName("div")
getElements* はコレクションではなく単一の要素に対してのみ使用できるため、要素が 1 つだけ必要な場合は次のようになります。 document.querySelector("#someId .someClass div")
は次のように記述できます:
document.getElementById("someId").getElementsByClassName("someClass")[0].getElementsByTagName("div")[0]
[0]は、コレクションを返す各ステップで使用され、コレクションの最初の要素を取得することに注意してください。最終結果は、
querySelector
を使用した場合と同様に、1 つの要素のみです。 。すべての要素は querySelector* と getElement* を使用して呼び出すことができるため、両方の呼び出しを使用して操作を連鎖させることができます。これは、パフォーマンスを向上させたいが、実行できない getElement* 呼び出しの使用を避けられない場合に便利です。 querySelector の場合に非常に便利です。
通常、getElement* 呼び出しのみを使用してセレクターを作成できるかどうかを判断するのは簡単ですが、明確ではない場合がある状況が 1 つあります。
document.querySelectorAll(".class1.class2")
はに書き換えることができます
document.getElementsByClassName("クラス1 クラス2")
getElementById
は、仕様では「ツリー順序」と呼ばれる、事前順序、深さ優先の方法で要素を走査します。他の getElement* 呼び出しについては、同じツリー順序にあるかどうかは仕様からはわかりませんが、
getElementsByClassName(".someClass")[0]はすべてのブラウザーで確実に結果が得られるわけではありません。
getElementById("#someId")は、ページ上に同じ ID のコピーが複数ある場合でも信頼できるはずです。
構文とブラウザのサポート。
querySelector
は、より複雑なセレクターを使用する場合に便利です。たとえば、クラス foo に属するすべての要素のリスト:
.foo li
:
文字はセレクター内で特別な意味を持ちます。それから逃れる必要があります。 (セレクターのエスケープ文字も JS 文字列では特別な意味を持つため、同様に をエスケープする必要があります)。 リーリー