JavaScript- HTML-DOM-Navigation
Mit dem HTML-DOM können Sie mithilfe von Knotenbeziehungen im Knotenbaum navigieren.
DOM-Knoten
Gemäß dem HTML-DOM-Standard des W3C 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 (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 und alle Knoten geändert oder gelöscht werden.
Knotenbeziehungen
Die Knoten im Knotenbaum haben eine hierarchische Beziehung zueinander.
Die Begriffe Elternteil, Kind und Geschwister werden verwendet, um die Beziehungen zu beschreiben.
- In einem Knotenbaum wird der oberste Knoten als Wurzel (oder Wurzelknoten) bezeichnet.
- Jeder Knoten hat genau einen Elternteil, mit Ausnahme der Wurzel (die keinen Elternteil 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>
Aus dem obigen HTML können Sie lesen:
<html>ist der Wurzelknoten<html>hat keine Eltern<html>ist der Elternteil von<head>und<body><head>ist das erste Kind von<html><body>ist das letzte Kind von<html>
und:
<head>hat ein Kind:<title><title>hat ein untergeordnetes Element (einen Textknoten): "DOM Tutorial"<body>hat zwei Kinder:<h1>und<p><h1>hat ein Kind: "DOM Lektion eins"<p>hat ein Kind: "Hallo Welt!"<h1>und<p>sind Geschwister
Navigieren zwischen Knoten
Sie können die folgenden Knoteneigenschaften verwenden, um mit JavaScript zwischen Knoten zu navigieren:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
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 obigen Beispiel) enthält keinen Text.
Es enthält einen Textknoten mit dem Wert „DOM Tutorial“.
innerHTMLAuf den Wert des Textknotens kann über die Eigenschaft
des Knotens zugegriffen werden
:
myTitle = document.getElementById("demo").innerHTML;
Der Zugriff auf die innerHTML-Eigenschaft ist dasselbe wie der Zugriff auf die nodeValue
des ersten untergeordneten Elements:
myTitle = document.getElementById("demo").firstChild.nodeValue;
Der Zugriff auf das erste Kind kann auch wie folgt 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>
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>
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>
InnerHTML
In diesem Tutorial verwenden wir die innerHTML-Eigenschaft, um den Inhalt eines HTML-Elements abzurufen.
Das Erlernen der anderen oben genannten Methoden ist jedoch hilfreich, um die Baumstruktur und die Navigation des DOM zu verstehen.
DOM-Root-Knoten
Es gibt zwei spezielle Eigenschaften, die den Zugriff auf das vollständige Dokument ermöglichen:
document.body- Der Hauptteil des Dokumentsdocument.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>
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>
Die nodeName-Eigenschaft
Die nodeNameEigenschaft gibt den Namen eines Knotens an.
- nodeName ist schreibgeschützt
- nodeName eines Elementknotens ist derselbe wie der Tag-Name
- 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>
Hinweis: nodeName Enthält immer den Tag-Namen eines HTML-Elements in Großbuchstaben.
Die nodeValue-Eigenschaft
Die nodeValueEigenschaft 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 nodeTypeEigenschaft 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>
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.