DOM-Navigationseigenschaften sind großartig, wenn Elemente nahe beieinander liegen. Was ist, wenn sie nicht sind? Wie erhalte ich ein beliebiges Element der Seite?
Hierfür gibt es zusätzliche Suchmethoden.
document.getElementById oder nur id
Wenn ein Element die hat Mit dem Attribut id können wir das Element mit der Methode document.getElementById(id) abrufen, unabhängig davon, wo es sich befindet.
Zum Beispiel :
Außerdem gibt es eine globale Variable mit dem Namen id, die auf das Element verweist:
… es sei denn, wir deklarieren eine JavaScript-Variable mit dem Gleicher Name, dann hat er Vorrang:
Dieses Verhalten wird in beschrieben die Spezifikation, also ist es eine Art Standard. Es wird jedoch hauptsächlich aus Kompatibilitätsgründen unterstützt.
Der Browser versucht, uns zu helfen, indem er Namespaces von JS und DOM mischt. Das ist in Ordnung für einfache Skripte, die in HTML eingebunden sind, aber im Allgemeinen keine gute Sache. Es kann zu Namenskonflikten kommen. Wenn man JS-Code liest und kein HTML im Blick hat, ist es nicht offensichtlich, woher die Variable kommt.
Hier im Tutorial verwenden wir id der Kürze halber direkt auf ein Element verweisen, wenn es offensichtlich ist, woher das Element stammt.
Im wirklichen Leben ist document.getElementById die bevorzugte Methode.
id muss eindeutig sein Die id muss eindeutig sein. Das Dokument darf nur ein Element mit der angegebenen id enthalten.
Wenn mehrere Elemente mit derselben id, dann ist das Verhalten von Methoden, die es verwenden, unvorhersehbar, z document.getElementById kann jedes dieser Elemente zufällig zurückgeben. Halten Sie sich also bitte an die Regel und halten Sie id eindeutig.
document.getElementById, nicht anyElem.getElementById Die Methode getElementById kann nur für document Objekt. Es sucht nach der angegebenen id im gesamten Dokument.
querySelectorAll
Bei weitem am meisten Die vielseitige Methode elem.querySelectorAll(css) gibt alle Elemente in elem zurück, die dem angegebenen CSS-Selektor entsprechen.
Hier suchen wir nach allen <li> Elemente, die letzte untergeordnete Elemente sind:
Diese Methode ist in der Tat leistungsstark, da jeder CSS-Selektor verwendet werden kann.
Pseudoklassen im CSS-Selektor wie :hover und :active sind ebenfalls vorhanden unterstützt. Beispielsweise gibt document.querySelectorAll(":hover") die Auflistung mit Elementen zurück, über die der Zeiger jetzt verfügt (in Verschachtelungsreihenfolge: von der äußersten <html> bis zu den meisten verschachtelt).
querySelector
Der Aufruf von elem.querySelector(css) gibt das erste Element für das angegebene CSS zurück Selektor.
Mit anderen Worten, das Ergebnis ist dasselbe wie elem.querySelectorAll(css), aber letzterer sucht nach allen Elementen und wählt eines aus, während elem.querySelector sucht nur nach einem. Das Schreiben ist also schneller und auch kürzer.
entspricht
Frühere Methoden haben das DOM durchsucht.
Die elem.matches (css) suchen nach nichts Es wird lediglich geprüft, ob elem mit dem angegebenen CSS-Selektor übereinstimmt. Es gibt true oder false zurück.
Die Methode ist nützlich, wenn wir über Elemente iterieren (wie in a Array oder so) und versuchen, diejenigen herauszufiltern, die uns interessieren.
Zum Beispiel:
am nächsten
Vorfahren eines Elements sind: parent, das Elternteil von Elternteil, sein Elternteil und so weiter. Die Vorfahren bilden zusammen die Elternkette vom Element bis zum Anfang.
Die Methode elem.closest(css) sucht nach dem nächsten Vorfahren, der dem CSS-Selektor entspricht. Die elem selbst wird ebenfalls in die Suche einbezogen.
Mit anderen Worten, die Methode closest geht von der Element und überprüft jeden Elternteil. Wenn es mit dem Selektor übereinstimmt, wird die Suche gestoppt und der Vorfahr zurückgegeben.
Zum Beispiel:
getElementsBy *
Es gibt auch andere Methoden zum Suchen Für Knoten nach einem Tag, einer Klasse usw.
Heutzutage handelt es sich hauptsächlich um Historie, da querySelector leistungsfähiger und kürzer zu schreiben ist.
Hier werden sie hauptsächlich der Vollständigkeit halber behandelt, während Sie sie noch in den alten Skripten finden.
-
elem.getElementsByTagName(tag)sucht nach Elementen mit den angegebenen tag und gibt die Sammlung von ihnen zurück. Der Parametertagkann auch ein Stern"*"für „beliebige Tags“ sein. -
elem.getElementsByClassName(className)gibt Elemente mit der angegebenen CSS-Klasse zurück. -
document.getElementsByName(name)gibt Elemente mit zurück das angegebene Attributname, dokumentweit. Sehr selten verwendet.
Zum Beispiel:
Lassen Sie uns alle input -Tags in der Tabelle finden:
"s" Brief! Anfänger vergessen manchmal den Buchstaben "s". Das heißt, sie versuchen, getElementByTagName anstelle von getElementsByTagName aufzurufen.
Die "s" fehlt in getElementById, da er ein einzelnes Element zurückgibt. getElementsByTagName gibt jedoch eine Sammlung von Elementen zurück, sodass "s" enthalten ist.
Ein weiterer weit verbreiteter Anfängerfehler ist das Schreiben von:
Das funktioniert nicht, da eine Sammlung von Eingaben verwendet und der Wert eher als den darin enthaltenen Elementen zugewiesen wird.
Wir sollten entweder die Sammlung durchlaufen oder ein Element anhand seines Index abrufen und dann wie folgt zuweisen:
Suche nach .article Elementen:
Live-Sammlungen
Alle Methoden "getElementsBy*" geben eine Live-Sammlung zurück. Solche Sammlungen spiegeln immer den aktuellen Status des Dokuments und die „automatische Aktualisierung“ wider, wenn es sich ändert.
Im folgenden Beispiel gibt es zwei Skripte.
- Das erste Erstellt einen Verweis auf die Sammlung von
<div>. Ab sofort beträgt die Länge1. - Die zweiten Skripte wird ausgeführt, nachdem der Browser eine weitere
<div>erfüllt hat, sodass seine Länge2ist.
Im Gegensatz dazu , querySelectorAll gibt eine statische Auflistung zurück. Es ist wie ein festes Array von Elementen.
Wenn wir es stattdessen verwenden, geben beide Skripte :
Jetzt können wir den Unterschied leicht erkennen. Die statische Sammlung wurde nach dem Erscheinen einer neuen div im Dokument nicht vergrößert.
Zusammenfassung
Es gibt 6 Hauptmethoden zum Suchen nach Knoten im DOM:
| Methode | Sucht nach … | Kann cal l auf einem Element? | Live? |
querySelector |
CSS-Selektor | ✔ | – |
querySelectorAll |
CSS-Selektor | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
-Tag oder "*" |
✔ | ✔ |
getElementsByClassName |
Klasse | ✔ | ✔ |
Die bei weitem am häufigsten verwendeten sind querySelector und querySelectorAll, aber getElement(s)By* kann sporadisch hilfreich sein oder in den alten Skripten gefunden werden.
Außerdem:
- Es gibt
elem.matches(css)um zu überprüfen, obelemmit dem angegebenen CSS-Selektor übereinstimmt. - Es gibt
elem.closest(css), um nach dem nächsten Vorfahren zu suchen, der übereinstimmt der angegebene CSS-Selektor. Dieelemselbst wird ebenfalls überprüft.
Lassen Sie uns hier eine weitere Methode erwähnen, um die Kind-Eltern-Beziehung zu überprüfen, da dies manchmal nützlich ist:
-
elemA.contains(elemB)gibt true zurück, wennelemBinnerhalb vonelemA(ein Nachkomme vonelemA) oder wennelemA==elemB.