Bei der Entwicklung von Webanwendungen, insbesondere von Web2.0 -Programmen, ist es häufig erforderlich, ein Element auf der Seite zu erhalten und dann den Stil, den Inhalt usw. des Elements zu aktualisieren. Wie man die Elemente aktualisiert, ist das erste Problem zu lösen. Es ist erfreulich, dass es viele Möglichkeiten gibt, Knoten mit JavaScript zu erhalten. Hier ist eine kurze Zusammenfassung (die folgenden Methoden wurden in IE7 und Firefox 2.0.0.11 getestet):
1. Durch den Dokumentenknoten der obersten Ebene:
(1) document.getElementById (elementId): Diese Methode kann die erforderlichen Elemente über die Knoten -ID genau erhalten, was eine relativ einfache und schnelle Methode ist. Wenn die Seite mehrere Knoten mit derselben ID enthält, wird nur der erste Knoten zurückgegeben.
Heutzutage sind mehrere JavaScript -Bibliotheken wie Prototypen und Mootools erschienen, die eine einfachere Methode liefern: $ (ID), und der Parameter ist immer noch die ID des Knotens. Diese Methode kann als als
Eine andere Möglichkeit, document.getElementById () zu schreiben, aber die Funktion von $ () ist leistungsfähiger. Für eine bestimmte Verwendung finden Sie in ihren jeweiligen API -Dokumenten.
(2) document.getElementsByName (ElementName): Diese Methode erhält den Knoten durch den Namen des Knotens. Aus dem Namen ist ersichtlich, dass diese Methode nicht ein Knotenelement zurückgibt, sondern ein Array von Knoten mit demselben Namen. Anschließend können wir das Attribut des Knotens durchlaufen, um eine Schleife zu erhalten, um festzustellen, ob es sich um den erforderlichen Knoten handelt.
Beispiel: In HTML verwenden das Kontrollkästchen und das Radio den gleichen Namensattributwert, um Elemente in einer Gruppe zu identifizieren. Wenn wir jetzt das ausgewählte Element erhalten möchten, erhalten wir zunächst das gemischte Element und dann anschließend, ob der geprüfte Attributwert des Knotens wahr ist.
(3) document.getElementsByTagName (TagName): Diese Methode erhält den Knoten durch das Tag des Knotens, und die Methode gibt auch ein Array zurück, zum Beispiel:
document.getElementsByTagName ('a') gibt alle Hyperlink -Knoten auf der Seite zurück. Vor dem Erwerb eines Knotens kennen Sie normalerweise den Knotentyp. Die Verwendung dieser Methode ist daher relativ einfach. Der Nachteil ist jedoch auch offensichtlich, dh das zurückgegebene Array kann sehr groß sein, was viel Zeit verschwendet. Ist diese Methode nutzlos? Natürlich nicht. Diese Methode unterscheidet sich von den oben genannten zwei. Es ist keine proprietäre Methode von Dokumentknoten. Andere Knoten können auch angewendet werden, wie unten erwähnt.
2. durch den übergeordneten Knoten:
(1) Parentobj.Firstchild: Diese Methode kann verwendet werden, wenn der Knoten das erste Kind eines bekannten Knotens (ParentObj) ist. Diese Eigenschaft kann rekursiv verwendet werden, was bedeutet, dass sie unterstützt wird
parentobj.firstchild.firstchild.firstchild ..., sodass Sie tiefere Knoten bekommen können.
(2) Parentobj.Lastchild: Offensichtlich ist diese Eigenschaft der letzte untergeordnete Knoten des bekannten Knotens (Parentobj). Wie FirstChild kann es rekursiv verwendet werden.
Wenn wir die beiden kombinieren, werden wir einen aufregenderen Effekt erzielen, nämlich: parentobj.firstchild.lastchild.lastchild ...
(3) Parentobj.Childnodes: Holen Sie sich das untergeordnete Knotenarray bekannter Knoten, und dann können Sie die erforderlichen Knoten über Schleifen oder Indexes finden.
Hinweis: Nach dem Testen wurde festgestellt, dass das Array der direkten untergeordneten Knoten auf IE7 erhalten wird, während das Array der untergeordneten Knoten auf Firefox2.0.0.11 alle Kinderknoten ist, dh Kinderknoten einschließlich Kinderknoten.
(4) Parentobj.Children: Holen Sie sich das direkte Kinderknoten -Array bekannter Knoten.
HINWEIS: Nach dem Test auf IE7 ist der Effekt der gleiche wie bei Childnodes, aber Firefox 2.0.0.11 unterstützt es nicht. Dies ist auch der Grund, warum ich verschiedene Stile aus anderen Methoden verwenden möchte. Daher wird nicht empfohlen, zu verwenden.
(5) ParentObj.getElementsByTagName (TagName): Die Verwendungsmethode wird nicht wiederholt, sie gibt ein Array von untergeordneten Knoten eines bekannten Knotens mit einem bestimmten Wert zwischen allen untergeordneten Knoten eines bekannten Knotens zurück. Zum Beispiel:
ParentObj.getElementsByTagName ('a') gibt alle Hyperlinks in bekannten Kinderknoten zurück.
3. Durch benachbarte Knoten erhalten:
(1) Nachbarbornode.Previoussibling: Holen Sie sich den vorherigen Knoten eines bekannten Knotens (Nachbarn). Diese Eigenschaft scheint rekursiv verwendet zu werden, genau wie das FirstChild und LastChild in den vorherigen.
(2) Nachbarbebbornode.Nextsibling: Holen Sie sich den nächsten Knoten eines bekannten Knotens (Nachbarn), der auch Rekursion unterstützt.
4. Durch Kinderknoten erhalten:
(1) Childnode.ParentNode: Holen Sie sich den übergeordneten Knoten eines bekannten Knotens.
Die oben genannten Methoden sind nur einige grundlegende Methoden. Wenn Sie JavaScript -Bibliotheken wie Prototypen verwenden, können Sie auch andere verschiedene Methoden wie Klassenerwerb über Knoten usw. erhalten. Wenn jedoch die oben genannten Methoden flexibel verwendet werden können, glaube ich, dass die meisten Verfahren in der Lage sein sollten, damit fertig zu werden.