Javascript querySelector vs. getElementById [geschlossen]

119

Ich habe gehört, dass querySelector& querySelectorAllneue Methoden zur Auswahl von DOMElementen sind. Wie sie zu den älteren Methoden vergleichen, getElementByIdund getElementsByClassNamein Bezug auf Leistung und Browser - Unterstützung?

Wie ist die Leistung im Vergleich zur Verwendung des Abfrage-Selektors von jQuery?

Gibt es eine Best-Practice-Empfehlung für welches native Set?

javascript jquery dom geht zu elf
quelle
1
Besser definieren. Sie sind fast ganz anders.
4
Dies ist wie die Frage "Ist ein Schraubenschlüssel in einfacher Größe besser als ein verstellbarer Schraubenschlüssel?" Die Antwort ist: Sie sind leistungsfähiger und flexibler zu gestalten, und so bei vielen Gelegenheiten überlegen, aber getElementByIdund getElementsByClassNamesind immer noch ideal für die Zwecke ihrer Namen beschreiben.
einsamer
2
Oh, und qS/qSAkann aus jedem Elementkontext verwendet werden, gEBIkann aber nur aus dem documentKontext verwendet werden.
3
getElementByIdstimmt mit den idAttributen überein , um DOM-Knoten zu finden, während querySelectornach Selektoren gesucht wird. So für einen ungültigen Selektor zB <div id="1"></div>, getElementById('1')funktionieren würde , während querySelector('#1')fehlschlagen würde, wenn Sie es sagen , die übereinstimmen idAttribut (zB querySelector('[id="1"]').
Samuel Elh
3
Eine gerade FYI für alle die dies lesen, aber querySelectorund querySelectorAllsind jetzt voll unterstützt. caniuse.com/#feat=queryselector
Telarian

Antworten:

129

"Besser" ist subjektiv.

querySelector ist die neuere Funktion.

getElementByIdwird besser unterstützt als querySelector.

querySelectorwird besser unterstützt als getElementsByClassName.

querySelectorMit dieser Option können Sie Elemente mit Regeln finden, die nicht mit getElementByIdund ausgedrückt werden könnengetElementsByClassName

Sie müssen das geeignete Werkzeug für eine bestimmte Aufgabe auswählen.

(Oben zum querySelectorLesen querySelector/ querySelectorAll).

QUentin
quelle
7
querySelector Unterstützung: caniuse.com/#feat=queryselector
tazboy
2
@JasonVanDerMeijden - Wahrscheinlich nicht signifikant, wahrscheinlich von Browser zu Browser unterschiedlich.
Quentin
1
Sehr gute Antwort und hier sind einige Benchmark-Tests
angel.bonev
warum bessere Ordnung unterstützt: getElementById> querySelector> getElementsByClassName, weil ich dachte , getElementsByClassNamesollten gleiche Maß an Unterstützung haben getElementById?
Lei Yang
Diese Antwort scheint den Unterschied zwischen den Methoden, insbesondere in Bezug auf die Leistung, nicht zu berühren.
Dror Bar
42

Die Funktionen getElementByIdund getElementsByClassNamesind sehr spezifisch, während querySelectorund querySelectorAllsind ausgefeilter. Ich vermute, dass sie tatsächlich eine schlechtere Leistung haben werden.

Außerdem müssen Sie in den Browsern, auf die Sie abzielen, prüfen, ob die einzelnen Funktionen unterstützt werden. Je neuer es ist, desto höher ist die Wahrscheinlichkeit, dass es an Unterstützung mangelt oder die Funktion "fehlerhaft" ist.

Thiago Negri
quelle
@ Thomas dein Link ist down. Gibt es irgendwo einen funktionierenden Link?
user5508297
6
Es gibt mehrere archivierte Versionen: web.archive.org/web/20160108040024/http://jsperf.com/… Der Test ist jedoch sehr alt (2010), sodass das Ergebnis bei moderneren Engines möglicherweise sehr unterschiedlich ist.
Thomas
4
Die archivierte Seite ist tatsächlich dynamisch und ermöglicht es Ihnen, den Test in Ihrem aktuellen Browser erneut auszuführen. querySelectorAll ist in meinem Browser immer noch um etwa 37% langsamer. (Chrome 71 - vgy.me/TwGL3o.png ) Es ist auch erwähnenswert, dass getElementById ein Live-Ergebnis zurückgibt. Wenn Sie also das DOM ändern, wird die Änderung durch das Ergebnis von getElementByID (falls im Geltungsbereich) und die Knotenliste wiedergegeben Von querySelectorAll zurückgegeben ist eine Momentaufnahme, z. B. wie zum Zeitpunkt des Aufrufs, spiegelt das Ergebnis keine nachfolgenden Änderungen am DOM wider.
W.Prins
nodelist ... is not liveKönnen Sie dafür Unterlagen vorlegen? @ W.Prins beide Methoden geben den ElementTyp zurück.
Maximilian Burszley
Ah, ich sehe, ich habe einen Tippfehler gemacht, bitte nimm meine Entschuldigung an! Ich hätte "getElementsByClassName" schreiben sollen, wo ich "getElementByID" geschrieben habe, z. B. getElementsByClassName (und ähnliches), das eine Live-Ergebnismenge zurückgibt. Tatsächlich geben sowohl getElementsByClassName als auch querySelectorAll eine NodeList zurück, im ersten Fall jedoch live und im letzteren Fall Es ist ein Schnappschuss.
W.Prins