Das HTML-DOM
Die HTML-Datei auf der Platte hält nur Zeichen. Der Browser baut daraus einen lebendigen Baum, und dieser Baum ist das DOM. Auf dem Glas der Haltestelle stehen zwei Zeilen: die Überschrift Market und der Hinweis Stand clear. Die offene Seite bringt document schon mit. new document() wirft, und new Document() ist ein leeres Dokument, nicht diese Tafel.
Ein Baum, kein Runden
Auf der Seite zum Objekt Math kam eine Zahl von einem gemeinsamen Objekt zurück. Hier wird keine Breite gerundet und kein Zeitpunkt mit new Date gebaut. Du gehst von document nach unten: das Element html, dann head neben body, dann die Überschrift neben dem Hinweis. Mehrere Wege zum Auswählen, geändertes Markup und neue Knoten kommen später. Diese Seite lernt die Form und liest zwei Knoten.
Wo jedes Stück auf der Tafel sitzt
Jede Zeile ist eine Stelle, auf die du zeigen kannst. Die letzte Spalte ist die Verwechslung, die dich woanders hin schickt.
📊 Stellen auf dieser Tafel
| Stelle | Was du hältst | Auf dieser Tafel | Leicht verwechselt |
|---|---|---|---|
document |
der Baum selbst | der Eingang, ohne Tag-Namen | ihn für body halten |
document.documentElement |
das Element html | Tag HTML |
ihn die Überschrift nennen |
document.head |
das Element head | Geschwister von body | Market hier suchen |
document.body |
das Element body | Elternteil der Überschrift | ein Textknoten |
h1#stop |
das Überschrift-Element | Text Market |
die Datei auf der Platte |
| Text in der Überschrift | nur Zeichen | das Wort Market | ein Element mit id |
Überschrift und Hinweis sind Elementkinder von body und damit Geschwister. Das Wort Market ist kein Geschwister des Hinweises. Es ist Text in der Überschrift. tagName kommt in Großbuchstaben zurück, also meldet das Element html HTML. Der Knoten document hat kein Tag und kein Elternelement.
Drei Namen oben im Baum
Diese drei Eigenschaften nennen die äußeren Elemente. Keine davon ist die Überschrift auf dem Glas.
console.log(document.documentElement.tagName);
console.log(document.head.tagName);
console.log(document.body.tagName);
Die drei Zeilen sind HTML, HEAD und BODY. Head und body sind beide Kinder des Elements html, also Geschwister. Market steht nicht im head. Der Titel im head ist eine andere Zeichenkette als die Überschrift auf dem Glas.
Die Familie der Überschrift
Die id stop ist der Griff am Überschrift-Element. Das Elternelement ist body. Das nächste Element-Geschwister ist der Hinweis.
let stop = document.getElementById("stop");
console.log(stop.parentElement.tagName);
console.log(stop.nextElementSibling.id);
Die erste Zeile ist BODY. Die zweite ist note. nextElementSibling überspringt den Zeilenumbruch und landet auf dem Absatz. Das vorherige Element-Geschwister ist null, weil vor der Überschrift in body kein Element sitzt.
Das Wort und der Griff
Das Element und die Zeichen sind zwei verschiedene Lesarten.
let stop = document.getElementById("stop");
console.log(stop.textContent);
console.log(stop.id);
Die erste Zeile ist Market. Die zweite ist stop. textContent sind die Zeichen. id ist der Griff. Der Hinweis lautet Stand clear, und diese Zeichenkette steht nicht auf der Überschrift.
Zuerst Elemente, dann jeder Knoten
children zählt nur Elementkinder. childNodes zählt auch Textknoten, einschließlich der Zeilenumbrüche in der Tafeldatei. Führe das an einem body aus, der nur Überschrift und Hinweis enthält, nicht an dieser Lektionsseite und nicht an der Ausgabedatei unten.
console.log(document.body.children.length);
console.log(document.body.childNodes.length);
Mit einem Umbruch vor der Überschrift, einem zwischen den beiden Elementen und einem nach dem Hinweis ist children.length 2 und childNodes.length 5. Die drei zusätzlichen Knoten sind Text und enthalten nur Leerraum. Stehen beide Tags in einer Zeile, verschwinden diese Textknoten und die beiden Längen treffen sich.
Ein Name, der nicht auf der Tafel steht
Frage nach einer id, die die Datei nie geschrieben hat.
console.log(document.getElementById("platform"));
console.log(document.getElementById("stop") === null);
Die erste Zeile ist null. Die zweite ist false, weil stop existiert. null heißt kein Element, keine leere Überschrift. Eine neue Zeichenkette in textContent ändert den lebendigen Baum im Browser. Die HTML-Datei auf der Platte sagt weiterhin Market.
Eine Zeile auf der Seite
Ein dritter Absatz meldet das Eltern-Tag und den Überschriftstext. Das Skript steht am Ende von body, nachdem diese Elemente da sind.
<!DOCTYPE html>
<html>
<head>
<title>dom — page</title>
</head>
<body>
<h1 id="stop">Market</h1>
<p id="note">Stand clear</p>
<p id="board">…</p>
<script>
let stop = document.getElementById("stop");
let board = document.getElementById("board");
board.textContent = stop.parentElement.tagName + " / " + stop.textContent;
</script>
</body>
</html>
Der Absatz lautet BODY / Market. In dieser Datei stehen vor dem Skript drei Elemente in body, also gehört die Länge 2 nicht hierher. Das Element script ist ein weiteres Kind. Die nächste Seite wählt Elemente auf mehr als einem Weg.
Die Tafel selbst prüfen
- Die drei äußeren Tag-Namen ausgeben und HTML, dann HEAD, dann BODY erwarten
- Das Eltern-Tag der Überschrift ausgeben und BODY erwarten
- Die id des nächsten Element-Geschwisters ausgeben und note erwarten
- Den Überschriftstext ausgeben und Market erwarten, dann die id und stop
- Auf der Tafel mit zwei Elementen die Länge von children als 2 und von childNodes als 5 erwarten
- Die fehlende id ausgeben und null erwarten, dann den Vergleich mit stop und false
- Den Absatz lesen und BODY / Market erwarten
Falsche Stelle
Die Seite öffnet sich. Die Stelle, die du genannt hast, ist die falsche.
new document()aufrufen odernew Document()als diese Tafel lesen- Market in
document.headsuchen - Das Wort Market als Element-Geschwister des Hinweises behandeln
children.lengthlesen, wenn du jeden Knoten meinst, auch ZeilenumbrüchechildNodes.lengthlesen, wenn du nur Überschrift und Hinweis meinstnullbei fehlender id als leere Zeichenkette lesen- Erwarten, dass ein Schreiben in
textContentdie Datei auf der Platte ändert
Diese Dinge auseinanderhalten
documentist der Baum;documentElementist das Element htmlheadundbodysind Geschwister unter diesem Element html- Das Elternelement der Überschrift ist body; das nächste Element-Geschwister ist der Hinweis
textContentsind die Zeichen;idist der Griffchildrensind nur Elemente;childNodesenthält Leerraum-Text- Eine fehlende id ist
null; die gespeicherte Datei ist nicht der lebendige Baum - Die nächste Seite wählt Elemente über mehr als eine id
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt