HTML DOM Knoten

Im HTML DOM ist alles ein Knoten. Das DOM ist HTML, das als Knotenbaum behandelt wird.

DOM-Knoten

DOM-Knoten

Gemäß dem W3C HTML DOM-Standard ist alles in einem HTML-Dokument ein Knoten:

  • Das gesamte Dokument ist ein Dokumentknoten
  • Jedes HTML-Element ist ein Elementknoten
  • Der Text innerhalb von HTML-Elementen sind Textknoten
  • Jedes HTML-Attribut ist ein Attributknoten
  • Kommentare sind Kommentarknoten

HTML DOM-Knotenbaum

Der HTML DOM betrachtet ein HTML-Dokument als eine Baumstruktur. Diese Struktur wird als einKnotenbaum bezeichnet：

Beispiel für einen HTML DOM-Baum

DOM HTML tree

Eltern-, Kind- und Geschwisterknoten

Die Knoten im Knotenbaum haben eine hierarchische Beziehung zueinander.

Wir verwenden oft die BegriffeElternteil、KindundGeschwisterund andere Begriffe, um diese Beziehungen zu beschreiben. Ein Elternknoten hat Kindknoten. Kindknoten auf derselben Ebene werden Geschwister (Brüder oder Schwestern) genannt.

  • Im Knotenbaum wird der oberste Knoten als Wurzel bezeichnet.
  • Jeder Knoten hat einen Elternknoten, außer der Wurzel (die keinen Elternknoten hat).
  • Ein Knoten kann beliebig viele untergeordnete Knoten haben.
  • Geschwisterknoten sind Knoten, die denselben Elternknoten haben.

Das folgende Bild zeigt einen Teil des Knotenbaums und die Beziehungen zwischen den Knoten:

Node tree

Betrachten Sie das folgende HTML-Fragment:

<html> <head> <meta charset="utf-8"> <title>DOM-Tutorial</title> </head> <body> <h1>DOM-Kurs 1</h1> <p>Hello world!</p> </body> </html>

Aus dem obigen HTML:

  • Der <html>-Knoten hat keinen Elternknoten; er ist der Wurzelknoten
  • Der Elternknoten von <head> und <body> ist der <html>-Knoten
  • Der Elternknoten des Textknotens "Hello world!" ist der <p>-Knoten

Und:

  • Der <html>-Knoten hat zwei Kindknoten: <head> und <body>
  • Der <head>-Knoten hat zwei Kindknoten: <meta>- und <title>-Knoten
  • Der <title>-Knoten hat ebenfalls einen Kindknoten: den Textknoten "DOM Tutorial"
  • Die <h1>- und <p>-Knoten sind Geschwisterknoten und auch Kinder von <body>

Und:

  • Das <head>-Element ist das erste Kind des <html>-Elements
  • Das <body>-Element ist das letzte Kind des <html>-Elements
  • Das <h1>-Element ist das erste Kind des <body>-Elements
  • Das <p>-Element ist das letzte Kind des <body>-Elements

Warnung!

Ein häufiger Fehler bei der DOM-Verarbeitung ist die Erwartung, dass ein Elementknoten Text enthält.

In diesem Beispiel:<title>DOM Tutorial</title>, enthält der Elementknoten <title> einenTextknoten mit dem Wert "DOM Tutorial".。

Durch dieinnerHTML-Eigenschaft des Knotens können Sie auf den Wert des Textknotens zugreifen.

Mehr über die innerHTML-Eigenschaft erfahren Sie in einem späteren Kapitel.

Andere Erweiterungen