Stellungnahme! ! , dieser Artikel ist ein Nachdruck eines anderen Artikels, da er zufällig verwendet wurde und sich sehr praktisch anfühlte, also habe ich ihn für die zukünftige Verwendung aufgehoben! !
Vielen Dank an den ursprünglichen Autor! ! ! ,
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. Erhalten Sie über den Dokumentknoten der obersten Ebene:
(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 gibt es viele JavaScript-Bibliotheken wie Prototyp und Mootools, die eine einfachere Methode bereitstellen: $(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 ersichtlich ist, 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.
Beispiel: In HTML verwenden Kontrollkästchen und Radio denselben Namensattributwert, um Elemente innerhalb 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 ruft den Knoten über sein Tag ab. 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 Einsatz spannendere Ergebnisse, 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 Test 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: Rufen Sie das direkte untergeordnete Knotenarray eines bekannten Knotens ab.
Hinweis: Nach dem Test 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 von benachbarten 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) neighbourNode.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 verschiedenen oben genannten Methoden flexibel nutzen können, sollten Sie meiner Meinung nach mit den meisten Programmen zurechtkommen.
Beachten Sie, dass es sich hierbei um ein reproduziertes Dokument handelt: Es ist nicht ratsam, den HTML-Knoten über firstChild und lastChild abzurufen. Denn je nach Browser gibt firstChild möglicherweise das Attributobjekt von parentObj zurück.