Javascript Holen Sie sich HTML-DOM-Kenntnisse für übergeordnete, untergeordnete und angrenzende Knoten_Javascript

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 zu erhalten. Hier ist eine kurze Zusammenfassung (die folgenden Methoden wurden in IE7 und Firefox 2.0.0.11 getestet):

1 document-Knotenerfassung:

(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 Schreibweise 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('A'): Diese Methode ruft den Knoten über sein Tag ab. Diese Methode gibt auch ein Array zurück, zum Beispiel:

document.getElementsByTagName('A') gibt alle Hyperlinks zurück Knoten auf der Seite. Vor dem Erhalten des Knotens 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. Durch den übergeordneten Knoten gehen:

(1) parentObj.firstChild: Kann verwendet werden, wenn der Knoten der erste untergeordnete Knoten eines bekannten Knotens ist ( parentObj) Diese Methode. 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 bei der Verwendung einen aufregenderen Effekt, nämlich: parentObj.firstChild.lastChild.lastChild...
(3) parentObj.childNodes: Holen Sie sich das Array des Kindes Knoten eines Knotens, und dann können Sie den erforderlichen Knoten durch Schleifen oder Indizieren finden.
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) neighborNode. previousSibling: Holen Sie sich den vorherigen Knoten des bekannten Knotens (neighbourNode). das vorherige firstChild , lastChild scheint rekursiv verwendet werden zu können.
(2) neighbourNode.nextSibling: Ruft den nächsten Knoten des bekannten Knotens (neighbourNode) ab und unterstützt auch die Rekursion.

4. Über untergeordnete Knoten abrufen:

(1) childNode.parentNode: Den übergeordneten Knoten eines bekannten Knotens abrufen.

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.