Zusammenfassung von JavaScript -Dom -Knoten -Betriebsmethoden

Es gibt drei Haupttypen von Knoten: Elementknoten, Attributknoten und Textknoten.

Die Hauptsache an DOM ist, Elementknoten und Attributknoten hinzuzufügen, zu löschen, zu ändern und zu überprüfen. Im Folgenden werden die Operationen auf Elementknoten bzw. die Operationen auf Attributknoten eingeführt.

Elementknoten

überprüfen

Vor dem Hinzufügen, Löschen und Ändern des DOM müssen Sie zunächst das entsprechende Element finden. Die spezifischen Suchmethoden sind wie folgt:

 getElementById () // einen einzelnen Knoten erhalten

Gleichzeitig können Sie auch die Attribute des Elementknotens verwenden, um seine übergeordneten und untergeordneten Knoten und Textknoten zu erhalten:

Kinderknoten

 Node.childnodes // Holen Sie sich die untergeordnete Knotenliste nodelist; Beachten Sie, dass Zeilenpausen als Textknoten im Browser gezählt werden. Wenn Sie die Knotenliste auf diese Weise erhalten, ist das Filterung erforderlich.

Elternknoten

 Node.parentnode // gibt den übergeordneten Knotenknoten zurück.

Landsmann Knoten

 Node.previoussibling // gibt den vorherigen Knoten zurück, wenn nicht, nullnode.nextsibling // gibt den nächsten Knoten zurück

Zunahme

Um einen neuen Knoten hinzuzufügen, müssen Sie zuerst einen Knoten erstellen und dann den neu erstellten Knoten in das DOM einfügen. Im Folgenden sind die Methoden zum Erstellen von Knoten und zum Einfügen von Knoten aufgeführt, und die Methode zur Replikation von Knoten wird auch in die Erstellung von Knoten eingeführt.

Erstellen Sie einen Knoten

 createLement () // Erstellen Sie einen neuen Elementknoten gemäß dem angegebenen Tag -Namen

Erstellen Sie Code -Snippets (um eine häufige Aktualisierung des DOM zu vermeiden, können Sie zuerst Code -Snippets erstellen und dann nach Abschluss aller Knotenvorgänge zum DOM hinzufügen).

 CreatedocumentFragment ()

Replikationsknoten

 clonedNode = node.clonenode (boolean) // Es gibt nur einen Parameter, in einem booleschen Wert übergeben. TRUE bedeutet, alle untergeordneten Knoten unter dem Knoten zu kopieren. Falsch bedeutet, nur den Knoten zu kopieren

Knoten einfügen

 /*Knoten einfügen*/parentNode.AppendChild (childnode); // einen neuen Knoten am Ende der untergeordneten Knotenliste übergeordnetesNode.insertbefore (NewNode, TargetNode) anhängen; // NewNode in targetNode einfügen/*html code einfügen*/node.insertadjacentHtml ('vorabgin', html); // den Code -Knoten einfügen. INERSERTADJACENTHTML ('AfterBegin', html); // den Code -Knoten einfügen. INERSERTADJACENTHTML ('AfterBegin', html); // den Code -Knoten einfügen. INERSERTADJACENTHTML ('PROSED', HTML); // den Code nach dem letzten untergeordneten Element des Elementknotens einfügen. // Fügen Sie den Code nach dem Element ein

Knoten ersetzen

 parentNode.replace (newnode, targetNode); // TargetNode durch Newnode ersetzen

löschen

Knoten entfernen

 parentNode.removechild (childnode); // Entfernen Sie den Zielknotenknoten.Parentnode.removechild (Knoten); // Verwenden Sie, ohne den übergeordneten Knoten zu kennen

Attributknoten

Operation Attributknoten dienen zum Hinzufügen, Löschen, Ändern und Überprüfen der DOM -Stile. Es gibt verschiedene Betriebsmethoden für Inline-Stile, Inline-Stile und externe Stile. Die mit verschiedenen Methoden erhaltenen Stile sind ebenfalls in lesbar, beschreibbar und schreibgeschützt.

Holen Sie sich CSS -Stile direkt

 node.style.color // lesbar oder schriftlich

Die Eigenschaften und Methoden des Stils selbst

 node.style.csSTEXT // den Knoten inline -Stil String -Knoten erhalten.Style.length // Erhalten Sie die Anzahl der Inline -Stile.

Holen Sie sich und ändern Sie Elementstile

HTML5 bietet ein neues Attribut für Elemente: Classlist, um die Hinzufügung, Löschung, Änderung und Suche nach Elementstilblättern zu implementieren. Die Operation ist wie folgt:

 node.classList.add (Wert); // fügen Sie den angegebenen Klassenknoten hinzu. ClassList.Contains (Wert); // Bestimmen Sie, ob das Element die angegebene Klasse enthält. Wenn es einen TrueNode.ClassList.remove (Wert) gibt; // Löschen Sie den angegebenen Klassenknoten.ClassList.toggle (Wert); // Löschen Sie, wenn es eine bestimmte Klasse gibt, und fügen Sie die angegebene Klasse hinzu, wenn es keine gibt.

Methoden zur Änderung der DOM -Eigenschaften

 Node.getAttribute ('id') // node.setAttribute ('id') // Setzen

Schreibgeschützte Methode

GetComputedStyle ist die Fenstermethode. Es kann alle enden verwendeten CSS-Attributwerte des aktuellen Elements erhalten, sind jedoch schreibgeschützt. Es hat zwei Parameter, der erste ist der eingehende Knoten, der zweite kann eingeben: schweben,: Blur usw., um den Stil der Pseudoklasse zu erhalten, und wenn nicht, wird Null übergeben.

IE unterstützt jedoch nicht die GetComputedStyle -Methode, und CurrentStyle kann verwendet werden, um die Kompatibilität aufrechtzuerhalten:

 window.getComputedStyle? window.getComputedStyle (Knoten, Null): Knoten.CurrentStyle

Die obige Zusammenfassung von JavaScript -Dom -Knoten -Betriebsmethoden ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.