Lernen Sie die Grundlagen der JavaScript-DOM-Operationen in einem Artikel

DOM-Konzepte

DOM: Dokumentobjektmodell: Das Dokumentobjektmodell verwendet js, um HTML-Code zu bearbeiten, Elemente hinzuzufügen und Elemente zu löschen. . .

Elemente abrufen

(1) getElementById ruft ein Element per ID ab. (2) getElementsByTagName ruft ein Element per Tag-Namen ab (Array).
(3) getElementsByClassName ruft einen Elementsatz (Array) nach Klasse ab.
(4) getElementsByName ruft eine Elementsammlung (Array) über das Name-Attribut ab

Zusammenfassung : Elemente können basierend auf Tag-Name, ID, Klasse und Namensattributen abgerufen werden. Das Ergebnis der ID ist ein Element, während das Ergebnis der anderen eine Sammlung ist.
Das Dokumentobjekt unterstützt die oben genannten vier, während das Elementobjekt nur unterstützt
getElementsByTagName und getElementsByClassName

Elemente ändern

(1) Ändern Sie den Inhalt. Der Text innerhalb des Tags kann über die Eigenschaft innerText gelesen oder festgelegt werden. Der Text innerhalb des Tags kann über die Eigenschaft innerHTML gelesen oder festgelegt werden. Es gibt zwei Unterschiede: innerHTML analysiert den Text gemäß den HTML-Regeln, während innerText einfach als normaler Textinhalt behandelt wird.

(2) Ändern Sie den Stil
ein: xxx.stil.yyy
b: xxx.classname = "..." (entspricht der Änderung des Klassenattributs)

Hinzufügen und Entfernen von Elementen

(1) createElement erstellt einen Elementknoten
createElement("p") erstellt einen Absatz (2) createTextNode erstellt einen Textknoten
createTextNode("Textinhalt") erstellt einen Textknoten mit dem Wert "Textinhalt" (3) appendChild fügt einen Kindknoten hinzu (4) removeChild entfernt einen Kindknoten

Navigation

Dokument: Stammknoten
parentNode: Den übergeordneten Knoten abrufen
childNodes: Alle untergeordneten Knoten abrufen
firstChild: der erste untergeordnete Knoten
lastChild: der letzte untergeordnete Knoten

Dies ist das Ende dieses Artikels über die Grundlagen von JavaScript-DOM-Operationen. Weitere relevante Inhalte zu den Grundlagen von JavaScript-DOM finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!