JavaScript querySelectorとgetElementByIdの比較[終了]

121

querySelector＆querySelectorAllはDOM要素を選択するための新しい方法であると聞きました。彼らはどのように古い方法と比較し、ないgetElementById＆getElementsByClassNameパフォーマンスおよびブラウザのサポートの面で？

jQueryのクエリセレクターを使用する場合とパフォーマンスはどのように比較されますか？

どのネイティブセットを使用するためのベストプラクティスの推奨事項はありますか？

javascript jquery dom

— gosToEleven
ソース

より良い定義。それらはほぼ完全に異なります。

これは、「シングルサイズのスパナは調整可能なスパナよりも優れているのか」と尋ねるようなものです。答えは次のとおりです。彼らはより強力で、より柔軟で、非常に多くの場面で優れているが、getElementByIdそしてgetElementsByClassNameまだ彼らの名前は説明の目的のために理想的です。

— 寂しい

ああ、qS/qSAあらゆる要素のコンテキストから使用できますがgEBI、documentコンテキストからのみ使用できます。

getElementByIdセレクタで検索しidながら、属性を照合してDOMノードをquerySelector検索します。だから、無効なセレクタのために、例えば<div id="1"></div>、getElementById('1')一方で働くだろうquerySelector('#1')失敗するでしょう、あなたが一致するように指示しない限り、id（例えば属性をquerySelector('[id="1"]')。

— サミュエル・ELH

ただ、FYIこれを読んで誰のための、しかし、querySelectorおよびquerySelectorAll完全にサポートされるようになりました。caniuse.com/#feat=queryselector

— Telarian

回答:

130

「ベター」は主観的です。

querySelector 新しい機能です。

getElementByIdよりもサポートされていquerySelectorます。

querySelectorよりもサポートされていgetElementsByClassNameます。

querySelectorgetElementByIdおよびで表現できないルールを持つ要素を検索できますgetElementsByClassName

特定のタスクに適切なツールを選択する必要があります。

（上記では、querySelector読み取りquerySelector/ querySelectorAll）。

— クエンティン
ソース

querySelectorのサポート：caniuse.com/#feat=queryselector

— tazboy

@JasonVanDerMeijden —重要である可能性は低く、ブラウザーによって異なる可能性があります。

— クエンティン

非常に良い答えといくつかのベンチマークテスト

— angel.bonev

なぜ、より良い順番をサポート：getElementById> querySelector> getElementsByClassName、私は思ったので、getElementsByClassName同じレベルのサポートをしていなければなりませんかgetElementById？

— レイヤン

この答えは、方法の違い、特にパフォーマンスの違いには触れていないようです。

— Dror Bar

機能getElementByIdとgetElementsByClassNameは非常に具体的ですが、querySelectorとquerySelectorAllはより複雑です。私の推測では、実際にはパフォーマンスが低下します。

また、対象のブラウザで各機能のサポートを確認する必要があります。それが新しいほど、サポートの不足または機能が「バギー」である可能性が高くなります。

— チアゴネグリ
ソース

@thomasリンクがダウンしています。機能するリンクはどこにありますか？

— user5508297

アーカイブされたバージョンがいくつかあります：web.archive.org/web/20160108040024/http : //jsperf.com/…しかし、テストは実際には非常に古い（2010）ため、より新しいエンジンでは結果が非常に異なる場合があります。

— トーマス

アーカイブされたページは実際には動的であり、現在のブラウザーでテストを再実行できます。querySelectorAllは、私のブラウザで約37％報告されているだけで、まだ遅いです。（Chrome 71-vgy.me/TwGL3o.png）getElementByIdがライブ結果を返すことにも注意する必要があります。つまり、DOMを変更すると、その変更はgetElementByID（スコープ内にある場合）によって取得された結果に反映されますが、ノードリストはquerySelectorAllによって返されるのはスナップショットです。たとえば、呼び出しが行われた時点のものであったため、結果はDOMに対するその後の変更を反映していません。

— W.Prins、

nodelist ... is not liveそのためのドキュメントを提供できますか？@ W.Prins両方のメソッドがElementタイプを返します。

— Maximilian Burszley

ああ、タイプミスをしたようです。謝罪を受け入れてください！私は「getElementByID」を書いたところに「getElementsByClassName」と書いたはずです。たとえば、それはライブの結果セットを返すgetElementsByClassName（および類似のもの）です。確かにgetElementsByClassNameとquerySelectorAllの両方がNodeListを返しますが、前者の場合はライブで、後者の場合はそれはスナップショットです

— W.Prins