Einführung in Javascript DOM, Knoten und Elementerfassung

DOM

Dokument : Das „D“ in DOM. Wenn eine Webseite erstellt und in einen Webbrowser geladen wird, konvertiert es das geschriebene Webdokument in ein Dokumentobjekt.

Objekt : Das „O“ in DOM, ein Objekt ist eine autarke Sammlung von Daten. Variablen, die einem bestimmten Objekt zugeordnet sind, heißen Attribute dieses Objekts, und Funktionen, die nur über ein bestimmtes Objekt aufgerufen werden können, heißen Methoden dieses Objekts.

Modell : Das „M“ in DOM ist eine Darstellung von etwas. DOM stellt ein Dokument als Stammbaum dar.

Knoten

Knoten: Ein Dokument besteht aus Knoten, also Ästen und Blättern im Dokumentbaum.

Es gibt viele verschiedene Knotentypen im DOM, z. B. Elementknoten, Textknoten und Attributknoten.

Elementknoten:

Der Name des Tags ist der Name des Elements. Der Name des Textabsatzelements ist „p“, der Name des ungeordneten Listenelements ist „u1“ und der Name des Listenelementelements ist „1i“.

Elemente können andere Elemente enthalten. In unserem Dokument „Einkaufsliste“ sind alle Listenelementelemente in einem ungeordneten Listenelement enthalten. Tatsächlich ist das einzige Element, das nicht in einem anderen Element enthalten ist, das Element, das das Stammelement unseres Knotenbaums ist.

Textknoten:

Ein Elementknoten ist lediglich ein Knotentyp. Wenn ein Dokument nur aus leeren Elementen bestehen würde, hätte es zwar eine Struktur, das Dokument selbst hätte jedoch keinen Inhalt. Im Internet ist der Inhalt König, und die überwiegende Mehrheit der Inhalte besteht aus Text. Beispielsweise ist der im <p>-Element enthaltene Text ein Textknoten.
In XHTML-Dokumenten sind Textknoten immer innerhalb von Elementknoten enthalten. Aber nicht alle Elementknoten enthalten Textknoten.

Eigenschaftsknoten:

Attributknoten werden verwendet, um eine spezifischere Beschreibung eines Elements bereitzustellen. Beispielsweise haben fast alle Elemente ein Titelattribut, mit dem wir genau beschreiben können, was das Element enthält. Attributknoten sind immer in Elementknoten enthalten.

Elemente abrufen

Es gibt drei DOM-Methoden zum Abrufen von Elementknoten: eine nach der Element-ID, eine nach dem Tag-Namen und eine nach dem Klassennamen.

getElementById()

DOM bietet eine Methode namens getElementById, die ein Objekt zurückgibt, das dem Elementknoten mit einem bestimmten ID-Attributwert entspricht. Es handelt sich um eine Funktion, die für das Dokumentobjekt spezifisch ist. Auf den Funktionsnamen muss ein Paar Klammern folgen, die die Funktionsparameter enthalten. Die Methode getElementById hat nur einen Parameter. Der Wert des ID-Attributs des Elements, das Sie abrufen möchten, muss in einfache oder doppelte Anführungszeichen gesetzt werden document. getElementById（id） . Jedes Element in einem Dokument ist ein Objekt. Die von DOM bereitgestellten Methoden können jedes Objekt abrufen. Zum Beispiel:

document.getElementById("Käufe")`

getElementsByTagName()

Die Methode getElementsByTagName gibt ein Array von Objekten zurück, eines für jedes Element im Dokument, das über ein bestimmtes Tag verfügt. Auch diese Methode hat nur einen Parameter, nämlich den Namen des Tags: element.getElementsByTagName(tag) .
Es wird jedoch ein Array zurückgegeben, das viele Ähnlichkeiten mit der Methode getElementById aufweist, beispielsweise:

document.getElementsByTagName("li");

getElementsByClassName()

Diese Methode kann über den Klassennamen im Class-Attribut auf das Element zugreifen. getElementsByClassName akzeptiert nur einen Parameter, nämlich den Klassennamen:

getElementsByClassName(Klasse)

Der Rückgabewert dieser Methode ähnelt getElementsByTagName(), einem Array von Elementen mit demselben Klassennamen. wie:

document.getElementsByClassName("Verkauf");

Mit dieser Methode können auch Elemente mit mehreren Klassennamen gesucht werden, indem die Klassennamen im Zeichenfolgenparameter durch Leerzeichen getrennt werden.

Zusammenfassen:

1. Ein Dokument ist ein Knoten.

2. Knoten werden in verschiedene Typen unterteilt: Elementknoten, Attributknoten und Textknoten.

3. getElementById gibt ein Objekt zurück, das einem bestimmten Element im Dokument entspricht.

4. getElementsByTagName und getElementsByClassName geben ein Array von Objekten zurück, die einem bestimmten Satz von Elementknoten im Dokument entsprechen.

5. Jeder Knoten ist ein Objekt.

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!