Analysieren Sie den Unterschied zwischen den Methoden querySelector und getElementById in JavaScript

1. Übersicht

Als ich mir den Code ansah, stellte ich fest, dass querySelector() und querySelectorAll() grundsätzlich zum Abrufen von Elementen verwendet wurden, und ich fragte mich, warum getElementById() nicht verwendet wurde.
Vielleicht liegt es daran, dass ich diese beiden nie verwendet habe, ich kenne den Grund nicht.

1.1 Verwendung von querySelector() und querySelectorAll()

Methode querySelector()

Definition: Die Methode querySelector() gibt ein Element im Dokument zurück, das dem angegebenen CSS-Selektor entspricht.
Hinweis: Die Methode querySelector() gibt nur das erste Element zurück, das dem angegebenen Selektor entspricht. Wenn Sie alle Elemente zurückgeben müssen, verwenden Sie stattdessen die Methode querySelectorAll().
Syntax: document.querySelector(CSS-Selektoren);
Parameterwert: Zeichenfolge. Erforderlich. Gibt einen oder mehrere CSS-Selektoren für übereinstimmende Elemente an. Wählen Sie Elemente anhand ihrer ID, Klasse, ihres Typs, Attributs, Attributwerts usw. aus.
Trennen Sie bei mehreren Selektoren diese durch Kommas und geben Sie ein einzelnes übereinstimmendes Element zurück.
Rückgabewert: Das erste Element, das dem angegebenen CSS-Selektor entspricht. Wenn nicht gefunden, wird null zurückgegeben. Wenn ein ungültiger Selektor angegeben wird, wird eine SYNTAX_ERR-Ausnahme ausgelöst.

querySelectorAll() Methode

Definition: Die Methode querySelectorAll() gibt alle Elemente im Dokument zurück, die dem angegebenen CSS-Selektor entsprechen, und gibt ein NodeList-Objekt zurück.
Ein NodeList-Objekt stellt eine Sammlung von Knoten dar. Zugriff über Index möglich, Indexwert beginnt bei 0;
Tipp: Sie können die Längeneigenschaft des NodeList-Objekts verwenden, um die Elementattribute abzurufen, die dem Selektor entsprechen, und dann über alle Elemente iterieren, um die gewünschten Informationen zu erhalten.
Syntax: elementList = document.querySelectorAll(Selektoren);
elementList ist ein statisches Objekt vom Typ NodeList;
„Selectors“ ist eine Zeichenfolge, die einen oder mehrere durch Kommas getrennte CSS-Selektoren enthält.
Parameterwert: Zeichenfolge. Erforderlich. Gibt ein oder mehrere Elemente an, die dem CSS-Selektor entsprechen. Sie können ID, Klasse, Typ, Attribut, Attributwert usw. als Selektoren verwenden, um Elemente abzurufen.
Verwenden Sie Kommas (,), um mehrere Selektoren zu trennen.
Rückgabewert: Ein NodeList-Objekt, das alle Elemente im Dokument darstellt, die dem angegebenen CSS-Selektor entsprechen.
NodeList ist ein statisches Objekt vom Typ NodeList. Wenn der angegebene Selektor ungültig ist, wird eine SYNTAX_ERR-Ausnahme ausgelöst.

1.2 Verwendung von getElement(s)Byxxxx

getElementById() Methode

Definition: Die Methode getElementById() gibt eine Referenz auf das erste Objekt mit der angegebenen ID zurück.
Wenn kein Element mit der angegebenen ID vorhanden ist, wird null zurückgegeben.
Wenn mehrere Elemente mit der angegebenen ID vorhanden sind, wird das erste zurückgegeben.
Wenn Sie Elemente finden müssen, die keine ID haben, können Sie querySelector() mit einem CSS-Selektor verwenden.
Syntax: document.getElementById(elementID);
Parameterwert: Zeichenfolge. Erforderlich. Der Element-ID-Attributwert.
Rückgabewert: Elementobjekt Das Element mit der angegebenen ID

getElementsByTagName() Methode

Definition: Die Methode getElementsByTagName() gibt eine Sammlung von Objekten mit dem angegebenen Tag-Namen zurück.
Tipp: Der Parameterwert „*“ gibt alle Elemente des Dokuments zurück;
Syntax: document.getElementsByTagName(tagname)
Parameter: Zeichenfolge. Erforderlich. Der Tag-Name des abzurufenden Elements;
Rückgabewert: NodeList-Objekt, eine Sammlung von Elementen mit dem angegebenen Tag-Namen

Methode getElementsByClassName()

Definition: Die Methode getElementsByClassName() gibt eine Sammlung aller Elemente mit dem angegebenen Klassennamen im Dokument als NodeList-Objekt zurück.
Ein NodeList-Objekt stellt eine geordnete Liste von Knoten dar. Das NodeList-Objekt kann über die Knotenindexnummer in der Knotenliste auf die Knoten in der Tabelle zugreifen (die Indexnummer beginnt bei 0).
Tipp: Sie können die Längeneigenschaft des NodeList-Objekts verwenden, um die Anzahl der Elemente des angegebenen Klassennamens zu ermitteln und jedes Element zu durchlaufen, um das gewünschte Element zu erhalten.
Syntax: document.getElementsByClassName(Klassenname)
Parameter: Zeichenfolge. Der Klassenname des abzurufenden Elements. Mehrere Klassennamen werden durch Leerzeichen getrennt, z. B. „Testdemo“.
Rückgabewert: NodeList-Objekt, das die Elementsammlung des angegebenen Klassennamens darstellt. Die Reihenfolge der Elemente in der Sammlung entspricht der Reihenfolge, in der sie im Code erscheinen.

2. Unterschied

2.1 getElement(s)Byxxxx holt eine dynamische Sammlung, querySelector holt eine statische Sammlung

Dynamisch bedeutet, dass sich die ausgewählten Elemente mit dem Dokument ändern, während statisch bedeutet, dass sie nach ihrer Entfernung nichts mehr mit den Änderungen im Dokument zu tun haben.

Beispiel 1:

<Text>
  <ul id="box">
    <li class="a">Prüfung 1</li>
    <li class="a">Prüfung 2</li>
    <li class="a">Prüfung 3</li>
  </ul>
</body>

<Skripttyp="text/javascript">
  // Hol dir ul, um später li dynamisch hinzuzufügen
  var ul = document.getElementById('box');
  //Holen Sie sich das li in das vorhandene ul
  var Liste = ul.getElementsByTagName('li');
  für(var i =0; i < Liste.Länge; i++){
    ul.appendChild(document.createElement('li')); //Li dynamisch anhängen
  }
</Skript>

Der obige Code geriet in eine Endlosschleife, i < list.length. Diese Schleifenbedingung.
Denn nachdem die drei li zum ersten Mal darin abgerufen wurden, aktualisiert die Liste jedes Mal, wenn ein neues Element zu ul hinzugefügt wird, ihren Wert und ruft alle li in ul erneut ab.
Das heißt, getElement(s)Byxxxx erhält eine dynamische Sammlung, die sich immer mit der Änderung der DOM-Struktur ändert.
Das heißt, bei jedem Aufruf der Liste wird das Dokument erneut abgefragt, was zu einem Endlosschleifenproblem führt.

Beispiel 1 Modifikation:

Ändern Sie die Bedingung der For-Schleife in i < 4. Dadurch werden 4 neue Elemente zu ul hinzugefügt, sodass die Anzahl der eingefügten Li-Tags jetzt 7 beträgt.

<Text>
  <ul id="box">
    <li class="a">Prüfung 1</li>
    <li class="a">Prüfung 2</li>
    <li class="a">Prüfung 3</li>
  </ul>
</body>

<Skripttyp="text/javascript">
  var ul = document.getElementById('box');

  var Liste = ul.getElementsByTagName('li');
  für(var i = 0; i < 4; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('Listenlänge:',Listenlänge);
</Skript> 

Beispiel 2:

Die folgende statische Codesammlung wird in .querySelectorAll('li') wiedergegeben, nachdem alle li in ul abgerufen wurden. Unabhängig davon, wie viele li später dynamisch hinzugefügt werden, hat dies keine Auswirkungen auf die Parameter.

<Text>
  <ul id="box">
    <li class="a">Prüfung 1</li>
    <li class="a">Prüfung 2</li>
    <li class="a">Prüfung 3</li>
  </ul>
</body>

<Skripttyp="text/javascript">
  var ul = document.querySelector('ul');

  var list = ul.querySelectorAll('li');
  für(var i = 0; i < Liste.Länge; i++){
    ul.appendChild(document.createElement('li'));
  }
  console.log('list.length:',list.length); //Das Ausgabeergebnis ist immer noch 3, nicht die Anzahl der li zu diesem Zeitpunkt 6
</Skript> 

Warum ist es so gestaltet?
Die Methode querySelectorAll ist in der W3C-Spezifikation klar definiert:

Das von der Methode querySelectorAll() zurückgegebene NodeList-Objekt muss statisch sein ([DOM], Abschnitt 8).

Schauen wir uns an, was in Chrome passiert:

document.querySelectorAll('a').toString(); // gibt "[Objekt NodeList]" zurück
document.getElementsByTagName('a').toString(); // gibt "[Objekt HTMLCollection]" zurück

HTMLCollection wird im W3C wie folgt definiert:

Eine HTMLCollection ist eine Liste von Knoten. Auf einen einzelnen Knoten kann entweder über den Ordinalindex oder über die Namens- oder ID-Attribute des Knotens zugegriffen werden. Hinweis: Sammlungen im HTML-DOM werden als live betrachtet, d. h. sie werden automatisch aktualisiert, wenn das zugrunde liegende Dokument geändert wird.

Tatsächlich sind sich HTMLCollection und NodeList sehr ähnlich. Sie sind beide dynamische Sammlungen von Elementen und jeder Zugriff erfordert eine erneute Abfrage des Dokuments.
Unterschied: HTMLCollection gehört zur Document Object Model HTML-Spezifikation, während NodeList zur Document Object Model Core-Spezifikation gehört.
Dies ist ein wenig schwierig zu verstehen. Es wird leichter verständlich, wenn Sie sich das folgende Beispiel ansehen:

var ul = document.getElementsByTagName('ul')[0],
    lis1 = ul.childNodes,
    lis2 = ul.Kinder;
console.log(lis1.toString(), lis1.length); // "[Objekt NodeList]" 11
console.log(lis2.toString(), lis2.length); // "[Objekt HTMLCollection]" 4

Das NodeList-Objekt enthält alle Knoten im Dokument, wie etwa Element, Text und Kommentar.
Das HTMLCollection-Objekt enthält nur die Elementknoten im Dokument.
Darüber hinaus bietet das HTMLCollection-Objekt eine namedItem-Methode mehr als das NodeList-Objekt.
Daher ist im Browser der Rückgabewert von querySelectorAll ein statisches NodeList-Objekt, während der Rückgabewert der getElementsBy-Reihe tatsächlich ein HTMLCollection-Objekt ist.

2.2 Die empfangenen Parameter sind unterschiedlich

Der von der Methode querySelectorAll empfangene Parameter ist ein CSS-Selektor.
Die von der getElementsBy-Reihe empfangenen Parameter können nur ein einzelner className, tagName und Name sein;

var c1 = document.querySelectorAll('.b1 .c');
var c2 = document.getElementsByClassName('c');
var c3 = document.getElementsByClassName('b2')[0].getElementsByClassName('c');

Hinweis: Die von querySelectorAll empfangenen Parameter müssen strikt der CSS-Selektorspezifikation entsprechen .<br /> Das folgende Schreiben löst eine Ausnahme aus (Elementnamen, Klassen und IDs in CSS-Selektoren dürfen nicht mit Zahlen beginnen).

versuchen {
  var e1 = document.getElementsByClassName('1a2b3c');
  var e2 = document.querySelectorAll('.1a2b3c');
} fangen (e) {
  Konsole.Fehler(e.Nachricht);
}
console.log(e1 && e1[0].klassenname);
console.log(e2 && e2[0].klassenname);

2.3 Unterschiedliche Browserkompatibilität

querySelectorAll wird von IE 8+, FF 3.5+, Safari 3.1+, Chrome und Opera 10+ unterstützt;
Die getElementsBy-Reihe, am Beispiel getElementsByClassName, die spätestens zur Spezifikation hinzugefügt wurde, wird bereits von IE 9+, FF 3+, Safari 3.1+, Chrome und Opera 9+ unterstützt;

2.4 querySelector gehört zur Selectors API-Spezifikation im W3C, während die getElementsBy-Reihe zur DOM-Spezifikation des W3C gehört

Referenzartikel (bei Verstoß löschen)

Dies ist das Ende dieses Artikels über den Unterschied zwischen den Methoden querySelector und getElementById in JavaScript. Weitere Informationen zu den Methoden querySelector und getElementById in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!