Zusammenfassung von 11 Möglichkeiten zum Abrufen von DOM-Elementen in JavaScript_Javascript-Tipps

Bei der Entwicklung von Webanwendungen, insbesondere Web 2.0-Programmen, ist es häufig erforderlich, ein Element auf der Seite abzurufen und dann den Stil, den Inhalt usw. des Elements zu aktualisieren. Das erste zu lösende Problem besteht darin, die zu aktualisierenden Elemente zu erhalten. Glücklicherweise gibt es viele Möglichkeiten, Knoten mithilfe von JavaScript abzurufen. Hier ist eine kurze Zusammenfassung (die folgende Methode wurde in IE7 und Firefox 2.0.0.11 getestet):

1. Über den Dokumentknoten der obersten Ebene abrufen:

(1) document.getElementById(elementId): Diese Methode kann das erforderliche Element über die ID des Knotens genau abrufen. Es ist eine relativ einfache und schnelle Methode. Wenn die Seite mehrere Knoten mit derselben ID enthält, wird nur der erste Knoten zurückgegeben.

Heutzutage sind viele JavaScript-Bibliotheken wie Prototyp und Mootools erschienen, die eine einfachere Methode bieten: $(id), und der Parameter ist immer noch die ID des Knotens. Diese Methode kann als eine andere Art des Schreibens von document.getElementById() betrachtet werden, die Funktion von $() ist jedoch leistungsfähiger. Informationen zur spezifischen Verwendung finden Sie in den jeweiligen API-Dokumenten.

(2) document.getElementsByName(elementName): Diese Methode ruft den Knoten anhand seines Namens ab. Wie aus dem Namen hervorgeht, gibt diese Methode kein Knotenelement zurück, sondern ein Array von Knoten mit demselben Namen. Anschließend können wir ein bestimmtes Attribut des Knotens durchlaufen, um festzustellen, ob es sich um den erforderlichen Knoten handelt.

Zum Beispiel: In HTML verwenden Kontrollkästchen und Radio denselben Namensattributwert, um Elemente in einer Gruppe zu identifizieren. Wenn wir jetzt das ausgewählte Element abrufen möchten, holen wir uns zuerst das gemischte Element und führen dann eine Schleife durch, um zu bestimmen, ob der überprüfte Attributwert des Knotens wahr ist.

(3) document.getElementsByTagName(tagName): Diese Methode erhält den Knoten über sein Tag. Diese Methode gibt auch ein Array zurück. Beispiel: document.getElementsByTagName('A') gibt alle Hyperlink-Knoten auf der Seite zurück. Bevor der Knoten abgerufen wird, ist der Typ des Knotens im Allgemeinen bekannt, sodass die Verwendung dieser Methode relativ einfach ist. Der Nachteil liegt jedoch auch auf der Hand: Das zurückgegebene Array kann sehr groß sein, was viel Zeit verschwendet. Ist diese Methode also nutzlos? Natürlich nicht. Diese Methode unterscheidet sich von den beiden oben genannten. Sie ist keine proprietäre Methode des Dokumentknotens und kann auch auf andere Knoten angewendet werden, die unten erwähnt werden.

2. Erhalten Sie über den übergeordneten Knoten:

(1) parentObj.firstChild: Diese Methode kann verwendet werden, wenn der Knoten der erste untergeordnete Knoten eines bekannten Knotens (parentObj) ist. Dieses Attribut kann rekursiv verwendet werden, das heißt, es unterstützt die Form parentObj.firstChild.firstChild.firstChild..., sodass tiefere Knoten erhalten werden können.

(2) parentObj.lastChild: Offensichtlich dient dieses Attribut dazu, den letzten untergeordneten Knoten des bekannten Knotens (parentObj) abzurufen. Wie firstChild kann es auch rekursiv verwendet werden.

Wenn wir die beiden kombinieren, erzielen wir im Gebrauch einen aufregenderen Effekt, nämlich: parentObj.firstChild.lastChild.lastChild...

(3) parentObj.childNodes: Rufen Sie das untergeordnete Knotenarray eines bekannten Knotens ab und suchen Sie dann den erforderlichen Knoten durch Schleifen oder Indizieren.

Hinweis: Nach dem Testen wurde festgestellt, dass in IE7 das Array direkter untergeordneter Knoten erhalten wird, während in Firefox 2.0.0.11 alle untergeordneten Knoten erhalten werden, einschließlich der untergeordneten Knoten des untergeordneten Knotens .

(4) parentObj.children: Ruft das direkte untergeordnete Knotenarray eines bekannten Knotens ab.

Hinweis: Nach dem Testen ist der Effekt unter IE7 derselbe wie bei childNodes, wird jedoch von Firefox2.0.0.11 nicht unterstützt. Aus diesem Grund verwende ich einen anderen Stil als andere Methoden. Daher wird seine Verwendung nicht empfohlen.

(5) parentObj.getElementsByTagName(tagName): Die Verwendungsmethode wird nicht im Detail beschrieben. Sie gibt ein Array von untergeordneten Knoten mit dem angegebenen Wert unter allen untergeordneten Knoten des bekannten Knotens zurück. Beispiel: parentObj.getElementsByTagName('A') gibt alle Hyperlinks in bekannten untergeordneten Knoten zurück.

3. Erhalten Sie über benachbarte Knoten:

(1) neighbourNode. previousSibling: Ruft den vorherigen Knoten des bekannten Knotens ab (neighbourNode). Dieses Attribut scheint wie das vorherige firstChild und lastChild rekursiv verwendet zu werden.

(2) neighborNode.nextSibling: Ruft den nächsten Knoten des bekannten Knotens (neighbourNode) ab und unterstützt auch die Rekursion.

4. Erhalten Sie über untergeordnete Knoten:

(1) childNode.parentNode: Ruft den übergeordneten Knoten eines bekannten Knotens ab.

Die oben genannten Methoden sind nur einige grundlegende Methoden. Wenn Sie JavaScript-Bibliotheken wie Prototype verwenden, erhalten Sie möglicherweise auch andere Methoden, z. B. das Abrufen über die Klasse des Knotens usw. Wenn Sie jedoch die oben genannten Methoden flexibel nutzen können, sollten Sie meiner Meinung nach mit den meisten Programmen umgehen können.