HTML DOM Navigation

Mit HTML DOM können Sie den Knotenbaum mithilfe von Knotenbeziehungen navigieren.

HTML DOM-Knotenliste

Die Methode getElementsByTagName() gibteine Knotenlistezurück. Eine Knotenliste ist ein Array von Knoten.

Der folgende Code wählt alle <p>-Knoten im Dokument aus:

Beispiel

var x=document.getElementsByTagName("p");

Auf diese Knoten kann über die Indexnummer zugegriffen werden. Um auf das zweite <p> zuzugreifen, kannst du schreiben:

y=x[1];

Selbst ausprobieren »

Hinweis:

Der Index beginnt bei 0.

Länge der HTML-DOM-Node-Liste

Die Eigenschaft length definiert die Anzahl der Knoten in einer Node-Liste.

Mit der Eigenschaft length kannst du die Node-Liste durchlaufen:

Beispiel

x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br>"); }

Selbst ausprobieren »

Beispielanalyse:

  • Alle <p>-Elementknoten abrufen
  • Gib den Wert des Textknotens jedes <p>-Elements aus

Navigieren durch Knotenbeziehungen

Du kannst in der Dokumentstruktur mit drei Knoteneigenschaften navigieren: parentNode, firstChild und lastChild.

Sieh dir den folgenden HTML-Ausschnitt an:

<html> <head> <meta charset="utf-8"> </head> <body> <p>Hello World!</p> <div> <p>DOM ist sehr nützlich!</p> <p>Dieses Beispiel veranschaulicht die Beziehungen zwischen Knoten.</p> </div> </body> </html>
  • Das erste <p>-Element ist das erste Kindelement des <body>-Elements (firstChild)
  • Das <div>-Element ist das letzte Kindelement des <body>-Elements (lastChild)
  • Das <body>-Element ist der Elternknoten (parentNode) des ersten <p>-Elements und des <div>-Elements

Mit der firstChild-Eigenschaft kann auf den Text eines Elements zugegriffen werden:

Beispiel

<p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script>

Selbst ausprobieren »

DOM-Wurzelknoten

Es gibt zwei spezielle Eigenschaften, die Zugriff auf das vollständige Dokument ermöglichen:

  • document.documentElement - Vollständiges Dokument
  • document.body - Der Body des Dokuments

Beispiel

<p>Hallo Welt!</p> <div> <p>DOM ist sehr nützlich!</p> <p>Dieses Beispiel veranschaulicht die Eigenschaft<b>document.body</b>.</p> </div> <script> alert(document.body.innerHTML); </script>

Selbst ausprobieren »

childNodes und nodeValue

Zusätzlich zur innerHTML-Eigenschaft können Sie auch die Eigenschaften childNodes und nodeValue verwenden, um den Inhalt eines Elements abzurufen.

Der folgende Code ruft den Wert des <p>-Elements mit id="intro" ab:

Beispiel

<p id="intro">Hello World!</p> <script> txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </script>

Selbst ausprobieren »

Im obigen Beispiel ist getElementById eine Methode, während childNodes und nodeValue Eigenschaften sind.

In diesem Tutorial verwenden wir die innerHTML-Eigenschaft. Das Erlernen der oben genannten Methoden hilft jedoch, die DOM-Baumstruktur und -navigation zu verstehen.

Andere Erweiterungen