JavaScript-DOM-Navigation

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Mit dem HTML-DOM können Sie mithilfe von node im Knotenbaum navigieren Beziehungen.

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 in HTML-Elementen sind Textknoten

  • Jedes HTML-Attribut ist ein Attributknoten (veraltet)

  • Alle Kommentare sind Kommentarknoten

Mit dem HTML-DOM kann per JavaScript auf alle Knoten im Knotenbaum zugegriffen werden.

Es können neue Knoten erstellt werden, und zwar alles Knoten können geändert oder gelöscht werden.

Knotenbeziehungen

Die Knoten im Knotenbaum stehen in einer hierarchischen Beziehung zueinander.

Zur Beschreibung der Beziehungen werden die Begriffe Eltern, Kind und Geschwister verwendet.

  • In einem Knotenbaum wird der oberste Knoten als Wurzel (oder Wurzelknoten) bezeichnet.

  • Jeder Knoten hat genau einen übergeordneten Knoten, mit Ausnahme der Wurzel (die keinen übergeordneten Knoten hat).

  • Ein Knoten kann mehrere Kinder haben

  • Geschwister (Brüder oder Schwestern) sind Knoten mit demselben Elternteil

<html>

       <head>
          <title>DOM Tutorial</title>
       </head>
	<body>
          <h1>DOM Lesson one</h1>
          <p>Hello world!</p>
       </body>
     
</html>

Im obigen HTML können Sie Folgendes lesen:

  • <html> ist der Stammknoten

  • <html> hat keine übergeordneten Elemente

  • <html> ist das übergeordnete Element von <head> und < Körper>

  • <head> ist das erste untergeordnete Element von <html>

  • <body> ist das letzte untergeordnete Element von <html>

Und :

  • <head> hat ein untergeordnetes Element: <title>

  • <title> hat ein untergeordnetes Element (einen Textknoten): „DOM Tutorial“

  • <body> hat zwei untergeordnete Elemente: <h1> und < p>

  • <h1> hat ein Kind: „DOM Lesson one“

  • <p> hat ein Kind: „Hallo Welt!“

  • <h1> und <p> sind Geschwister

Navigieren zwischen Knoten

Mit den folgenden Knoteneigenschaften können Sie zwischen Knoten navigieren JavaScript:

  • parentNode

  • childNodes[nodenumber]

  • firstChild

  • lastChild

  • nextSibling

  • previousSibling

Untergeordnete Knoten und Knotenwerte

Ein häufiger Fehler bei der DOM-Verarbeitung besteht darin, zu erwarten, dass ein Elementknoten Text enthält.

Beispiel :

<title 
 id="demo">DOM Tutorial</title>

Der Elementknoten <title> (im Beispiel oben) enthält keinen Text.

Es enthält einen Textknoten mit dem Wert „DOM Tutorial“.

Auf den Wert des Textknotens kann über die Eigenschaft innerHTML des Knotens zugegriffen werden:

myTitle = document.getElementById("demo").innerHTML;

Der Zugriff auf die innerHTML-Eigenschaft ist dasselbe wie der Zugriff auf den nodeValue des ersten Kindes:

myTitle = document.getElementById("demo").firstChild.nodeValue;

Der Zugriff auf das erste Kind kann auch folgendermaßen erfolgen:

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Alle (3) folgenden Beispiele rufen den Text eines <h1>-Elements ab und kopieren ihn in ein <p>-Element:

Beispiel

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML 
 = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

Beispiel

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

Beispiel

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

InnerHTML

In diesem Tutorial verwenden wir die innerHTML-Eigenschaft, um den Inhalt einer abzurufen HTML-Element.

Allerdings lernen Die anderen oben genannten Methoden sind hilfreich für das Verständnis der Baumstruktur und der Navigation im DOM.

DOM-Wurzelknoten

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

  • document.body - Der Hauptteil des Dokuments

  • document.documentElement - Das vollständige Dokument

Beispiel

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p 
id="demo"></p>
<script>
document.getElementById("demo").innerHTML 
= document.body.innerHTML;
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

Beispiel

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
document.documentElement.innerHTML;
</script>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

Die nodeName-Eigenschaft

Die Eigenschaft nodeName gibt den Namen eines Knotens an.

  • nodeName ist schreibgeschützt

  • Der Knotenname eines Elementknotens ist mit dem Tag-Namen identisch

  • nodeName eines Attributknotens ist der Attributname

  • nodeName eines Textknotens ist immer #text

  • nodeName des Dokumentknotens ist immer #document

Beispiel

 <h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeName;
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

</body>
</html>

Hinweis: nodeName enthält immer den Tag-Namen eines HTML-Elements in Großbuchstaben.

Die nodeValue-Eigenschaft

Die Eigenschaft nodeValue gibt den Wert eines Knotens an.

  • nodeValue für Elementknoten ist null

  • nodeValue für Textknoten ist der Text selbst

  • nodeValue für Attributknoten ist der Attributwert

Die nodeType-Eigenschaft

Die Eigenschaft nodeType ist schreibgeschützt. Es gibt den Typ eines Knotens zurück.

Beispiel

<h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeType;
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

</body>
</html>

Die wichtigsten nodeType-Eigenschaften sind:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2  class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Typ 2 ist im HTML-DOM veraltet (funktioniert aber). Es ist im XML-DOM nicht veraltet.