Unterschied zwischen den Methoden querySelector und getElementById in JS

1. Übersicht

Beim Betrachten des Codes stellte ich fest, querySelector() und querySelectorAll() grundsätzlich zum Abrufen von Elementen verwendet werden, und ich fragte mich, warum getElementById() nicht verwendet wird.
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: querySelector() gibt ein Element im Dokument zurück, das dem angegebenen CSS-Selektor entspricht.

Hinweis: uerySelector() 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 selectors)；


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: 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(selectors);
elementList ist ein statisches Objekt vom Typ NodeList ;
selectors ist eine Zeichenfolge, die einen oder mehrere durch Kommas getrennte CSS Selektoren enthält.

Parameterwert: String . Erforderlich. Gibt ein oder mehrere Elemente an, die dem CSS-Selektor entsprechen. Sie können id , class , Typ, Attribut, Attributwert usw. als Selektoren verwenden, um Elemente zu erhalten.
Verwenden Sie Kommas (,), um mehrere Selektoren zu trennen.

返回值: 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: 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: String . Erforderlich. Der Element-ID-Attributwert.
Rückgabewert: Elementobjektelement mit angegebener ID

getElementsByTagName() Methode

Definition: 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: String erforderlich. Der Tag-Name des abzurufenden Elements;
Rückgabewert: NodeList -Objekt, eine Sammlung von Elementen mit dem angegebenen Tag-Namen

Methode getElementsByClassName()

Definition: getElementsByClassName() gibt eine Sammlung aller Elemente mit einem angegebenen Klassennamen im Dokument als NodeList -Objekt zurück.
NodeList Objekt stellt eine geordnete Liste von Knoten dar. 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(classname)
Parameter: Zeichenfolge. Der Klassenname des abzurufenden Elements. Mehrere Klassennamen werden durch Leerzeichen getrennt, beispielsweise „ test demo “.
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>

Unterschied zwischen querySelector und getElementById javascript JavaScript

Beispiel 2:

Die folgende statische Codesammlung wird in .querySelectorAll('li') wiedergegeben, um alle li in ul zu erhalten. 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>

Der Unterschied _javascript_02 den Methoden querySelector und getElementById in JavaScript

Warum ist es so gestaltet?

Die Methode querySelectorAll ist in der W3C-Spezifikation klar definiert:

The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 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

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

2.2 Die empfangenen Parameter sind unterschiedlich

Der von querySelectorAll empfangene Parameter ist ein CSS-Selektor.
Die von getElementsBy 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. 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;

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