JavaScript HTML DOM Navigation

Mit HTML DOM können Sie die Knotenverhältnisse verwenden, um im Knotenbaum zu navigieren.

DOM-Knoten

Laut dem W3C-Standard HTML DOM sind alle Dinge im HTML-Dokument Knoten:

  • Das gesamte Dokument ist ein Dokumentknoten
  • Jedes HTML-Element ist ein Elementknoten
  • Der Text innerhalb eines HTML-Elements ist ein Textknoten
  • Jede HTML-Eigenschaft ist ein Attributknoten
  • Alle Kommentare sind Kommentar-Knoten
DOM HTML Baum

Mit HTML DOM können alle Knoten im Knotenbaum über JavaScript erreicht werden.

Man kann neue Knoten erstellen und alle Knoten ändern und löschen.

Knotenverhältnisse

Knoten im Knotenbaum haben eine bestimmte Hierarchiebeziehung zueinander.

  • Der Begriff (Vater, Kind und Kollege, parent, child und sibling) wird verwendet, um diese Beziehungen zu beschreiben.
  • In der Knotenbaumstruktur wird der oberste Knoten als Wurzel (Wurzelknoten) bezeichnet.
  • Jeder Knoten hat einen Vaterknoten, außer dem Wurzelknoten (der Wurzelknoten hat keinen Vaterknoten).
  • Knoten können eine bestimmte Anzahl von Kindern haben.
  • Kollegen (Brüder oder Schwestern) sind Knoten, die denselben Vater haben.
<html>
   <head>
       <title>DOM-Tutorial</title>
   </head>
  <body>
       <h1>Erste Lektion im DOM</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML Baum

Aus dem obigen HTML können Sie die folgenden Informationen lesen:

  • Der <html> ist der Wurzelknoten.
  • Der <html> hat keinen Vater.
  • Der <html> ist der Vater von <head> und <body>.
  • Der <head> ist der erste Unterbaum des <html>.
  • <body> ist der letzte Kind von <html>

Gleichzeitig:

  • <head> hat einen Kind: <title>
  • <title> hat einen Kind (Textknoten): "DOM-Anleitung"
  • <body> hat zwei Kinder: <h1> und <p>
  • <h1> hat einen Kind: "DOM-Einstiegskurs"
  • <p> hat einen Kind: "Hallo Welt!"
  • <h1> und <p> sind Geschwister

Navigation zwischen Knoten

Mit JavaScript können Sie die folgenden Knotenattribute verwenden, um zwischen Knoten zu navigieren:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Kindknoten und Knotenwert

Eine häufige Fehleinschätzung bei der DOM-Verarbeitung ist, dass Elementknoten Text enthalten.

Beispiel:

<title id="demo">DOM-Anleitung</title>

（im obigen Beispiel befindliche）Elementknoten <title> enthält nichtText.

es enthält den Text "DOM-Anleitung"Textknoten.

Der Wert eines Textknotens kann durch das Attribut innerHTML durch das Attribut

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

Der Zugriff auf das Attribut innerHTML entspricht dem Zugriff auf den ersten Kindknoten: nodeValue:

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

Man kann auch so auf den ersten Kindknoten zugreifen:

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

In den folgenden drei Beispielen wird <h1> den Text des Elements und kopieren Sie ihn in <p> Elementen:

Beispiel 1

<html>
<body>
<h1 id="id01">meine erste Seite</h1>
<p id="id02">Hallo!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Probieren Sie es selbst aus

Beispiel 2

<html>
<body>
<h1 id="id01">meine erste Seite</h1>
<p id="id02">Hallo!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Probieren Sie es selbst aus

Beispiel 3

<html>
<body>
<h1 id="id01">meine erste Seite</h1>
<p id="id02">Hallo!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Probieren Sie es selbst aus

InnerHTML

In diesem Tutorial verwenden wir innerHTML Inhalt des HTML-Elements abrufen.

Allerdings hilft das Lernen der anderen Methoden, das Baumstruktur und die Navigation des DOM zu verstehen.

DOM Wurzelknoten

Es gibt zwei spezielle Attribute, die den Zugriff auf das gesamte Dokument ermöglichen:

  • document.body - Body des Dokuments
  • document.documentElement - Gesamtes Dokument

Beispiel

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM ist sehr nützlich!</p>
<p>Dieses Beispiel zeigt die Eigenschaft <b>document.body</b> an.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Probieren Sie es selbst aus

Beispiel

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM ist sehr nützlich!</p>
<p>Dieses Beispiel zeigt die Eigenschaft <b>document.documentElement</b> an.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Probieren Sie es selbst aus

nodeName Attribut

nodeName Das Attribut legt den Namen des Knotens fest.

  • nodeName ist schreibgeschützt.
  • Der nodeName des Elementknotens entspricht dem Tagnamen.
  • Der nodeName des Attributknotens ist der Name des Attributes.
  • Der nodeName des Textknotens ist immer #text.
  • Der nodeName des Dokumentknotens ist immer #document.

Beispiel

<h1 id="id01">meine erste Webseite</h1>
<p id="id02">Hallo!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Probieren Sie es selbst aus

Anmerkung:nodeName enthält immer den großen Tagnamen des HTML-Elements.

nodeValue Attribut

nodeValue Das Attribut legt den Wert des Knotens fest.

  • Der nodeValue des Elementknotens ist undefined.
  • Der nodeValue des Textknotens ist der Text.
  • Der nodeValue des Attributknotens ist der Attributwert.

nodeType Attribut

nodeType Das Attribut nodeType gibt den Typ des Knotens zurück.nodeType ist schreibgeschützt.

Beispiel

<h1 id="id01">meine erste Webseite</h1>
<p id="id02">Hallo!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Probieren Sie es selbst aus

Der wichtigste nodeType-Attribut ist:

Knoten Typ Beispiel
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (veraltet)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Dies ist ein Kommentar -->
DOCUMENT_NODE 9 Das HTML-Dokument selbst (Elternteil von <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2 ist im HTML DOM nicht mehr unterstützt. In XML DOM ist es noch unterstützt.