querySelector und querySelectorAll vs getElementsByClassName und getElementById in JavaScript

Question

würde ich gerne wissen, was genau ist der Unterschied zwischen querySelector und querySelectorAll gegen getElementsByClassName und getElementById?

Von this link konnte ich entnehmen, dass mit querySelector ich document.querySelector(".myclass") schreiben können Elemente mit Klasse myclass und document.querySelector("#myid") zu bekommen Element mit myid ID zu bekommen. Aber ich kann das schon tun getElementsByClassName und getElementById. Welcher sollte bevorzugt werden?

Auch ich arbeite in XPages, wo die ID dynamisch mit Doppelpunkt generiert wird und so aussieht view:_id1:inputText1. Also wenn ich document.querySelector("#view:_id1:inputText1") schreibe, funktioniert es nicht. Aber schreiben document.getElementById("view:_id1:inputText1") funktioniert. Irgendwelche Ideen warum?

Answer 1

Ich würde gerne wissen, was genau ist der Unterschied zwischen querySelector und querySelectorAll gegen getElementsByClassName und getElementById?

Die Syntax und die Browser-Unterstützung.

querySelector ist sinnvoller, wenn Sie komplexere Selektoren verwenden möchten.

z.B. Alle Listenelemente von einem Element ab, die ein Mitglied der Foo-Klasse ist: .foo li

document.querySelector ("# Ansicht: _id1: inputText1") es funktioniert nicht. Aber das Schreiben von document.getElementById ("view: _id1: inputText1") funktioniert. Irgendwelche Ideen warum?

Das Zeichen : hat eine besondere Bedeutung in einem Selektor. Du musst ihm entkommen. (Das Selektor-Escape-Zeichen hat auch eine besondere Bedeutung in einer JS-Zeichenkette, also müssen Sie auch , die ist, entgehen).

document.querySelector("#view\\:_id1\\:inputText1") 

Answer 2

querySelector und querySelectorAll sind eine relativ neue APIs, während getElementById und getElementsByClassName haben bei uns für viel länger. Das bedeutet, dass das, was Sie verwenden, hauptsächlich davon abhängt, welche Browser Sie unterstützen müssen.

Wie für die :, hat es eine besondere Bedeutung, so dass Sie es entkommen müssen, wenn Sie es als Teil eines ID/Klassen-Namen verwenden müssen.

Answer 3

querySelector kann eine vollständige CSS (3) sein -Selector mit IDs und Klassen und Pseudo-Klassen zusammen wie folgt aus:

'#id.class:pseudo' 

// or 

'tag #id .class .class.class' 

mit getElementByClassName können Sie festlegen, nur eine Klasse

'class' 

mit getElementById können Sie einfach eine ID definieren

'id' 

Answer 4

Sammeln von Mozilla Documentation:

Die NodeSelector Schnittstelle Diese Spezifikation zwei neue Methoden zu beliebigen Objekten fügt das Dokument, die Document oder Element Schnittstellen Implementierung:

querySelector

Gibt die erste passende Element Knoten innerhalb des Teilbaums des Knotens. Wenn kein übereinstimmender Knoten gefunden wird, wird null zurückgegeben.

querySelectorAll

Gibt eine NodeList alle Anpasselement Knoten innerhalb des Teilbaums des Knotens enthält, oder ein leerer NodeList Wenn keine Übereinstimmungen gefunden werden.

und

Hinweis: Der NodeList von querySelectorAll() zurückgegeben Leben nicht. Dies ist , das sich von anderen DOM-Abfragemethoden unterscheidet, die Live-Node-Listen zurückgeben.

Answer 5

Über die Unterschiede gibt es ein wichtiges Thema in den Ergebnissen zwischen querySelectorAll und getElementsByClassName: der Rückgabewert unterscheidet. querySelectorAll wird eine statische Sammlung zurückgeben, während getElementsByClassName eine Live-Sammlung zurückgibt. Dies könnte zu Verwirrung führen, wenn Sie die Ergebnisse in einer Variablen für die spätere Verwendung speichern:

• Eine Variable erzeugt mit querySelectorAll wird die Elemente enthalten, die die Wähler im Moment erfüllen die Methode genannt wurde.
• Eine Variable, die mit getElementsByClassName generiert wurde, enthält die Elemente, die den Selektor erfüllt haben, wenn sie verwendet wird (was von dem Moment abweichen kann, als die Methode aufgerufen wurde).

zum Beispiel feststellen, wie auch wenn Sie die Variablen nicht neu zugewiesen haben aux1 und aux2, sie unterschiedliche Werte enthalten, nachdem die Klassen Aktualisierung:

// storing all the elements with class "blue" using the two methods 
 
var aux1 = document.querySelectorAll(".blue"); 
 
var aux2 = document.getElementsByClassName("blue"); 
 

 
// write the number of elements in each array (values match) 
 
console.log("Number of elements with querySelectorAll = " + aux1.length); 
 
console.log("Number of elements with getElementsByClassName = " + aux2.length); 
 

 
// change one element's class to "blue" 
 
document.getElementById("div1").className = "blue"; 
 

 
// write the number of elements in each array (values differ) 
 
console.log("Number of elements with querySelectorAll = " + aux1.length); 
 
console.log("Number of elements with getElementsByClassName = " + aux2.length);

.red { color:red; } 
 
.green { color:green; } 
 
.blue { color:blue; }

<div id="div0" class="blue">Blue</div> 
 
<div id="div1" class="red">Red</div> 
 
<div id="div2" class="green">Green</div>

Answer 6

ich dazu kam Seite rein, um die bessere Methode, herauszufinden, in Bezug auf Leistung verwenden - das heißt, die schneller ist:

querySelector/querySelectorAll or getElementsByClassName 

und ich fand dies: https://jsperf.com/getelementsbyclassname-vs-queryselectorall/18

Es läuft ein Test auf den 2 x Beispiele oben, plus es Futter in einem Test für die auch äquivalente Wähler jQuery. meine Testergebnisse waren wie folgt:

getElementsByClassName = 1,138,018 operations/sec - <<< clear winner 
querySelectorAll = 39,033 operations/sec 
jquery select = 381,648 operations/sec