JavaScript - DOM-Dokument: Ein Anfängerleitfaden
Hallo, ambitionierte Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von JavaScript und das Document Object Model (DOM). Machen Sie sich keine Sorgen, wenn diese Begriffe etwas einschüchternd klingen – bis zum Ende dieses Tutorials werden Sie Webseiten wie ein Profi manipulieren können!
Was ist das HTML DOM-Dokument?
Stellen Sie sich vor, Sie bauen ein Haus. Die Baupläne dieses Hauses sind wie Ihr HTML-Dokument, und das tatsächliche Haus ist das, was Sie im Browser sehen. Was wäre, wenn Sie die Farbe einer Wand ändern oder ein neues Fenster hinzufügen möchten, nachdem das Haus gebaut ist? Dann kommt das DOM ins Spiel!
Das HTML DOM (Document Object Model) ist eine Programmierschnittstelle für HTML-Dokumente. Es stellt die Struktur eines Dokuments als baumartige Hierarchie dar, wobei jedes Knoten ein Objekt darstellt, das einen Teil des Dokuments repräsentiert.
Das Dokumentenobjekt
An der Wurzel dieses Baumes steht das document-Objekt. Es ist wie das Fundament unseres Hauses – alles andere wird darauf aufgebaut.
Lassen Sie mit einem einfachen Beispiel beginnen:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste DOM-Seite</title>
</head>
<body>
<h1>Willkommen beim DOM!</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>In dieser HTML-Struktur steht document an der Spitze, gefolgt von html, dann head und body, und so weiter.
Zugriff auf das DOM-Dokumentenobjekt
Nun, da wir verstehen, was das DOM ist, lernen wir, wie man darauf zugreift. In JavaScript können wir das Dokumentenobjekt leicht mit dem document-Schlüsselwort zugreifen.
Hier ist ein einfaches Beispiel:
console.log(document);Wenn Sie dies in der Konsole Ihres Browsers ausführen, sehen Sie das gesamte Dokumentenobjekt. Es ist wie ein Blick von oben auf unser Haus!
Eigenschaften des DOM-Dokuments
Das Dokumentenobjekt hat viele Eigenschaften, die es uns ermöglichen, verschiedene Teile des HTML-Dokuments zu erreichen. Lassen Sie uns einige dieser Eigenschaften erkunden:
Eigenschaft childElementCount des Dokuments
Die Eigenschaft childElementCount gibt die Anzahl der Kinderelemente eines Elements zurück. Für das Dokumentenobjekt gibt es die Anzahl der direkten Kinder des <html>-Elements zurück.
console.log(document.childElementCount);Dies gibt typischerweise 1 zurück, da das <html>-Element normalerweise nur ein direktes Kind hat: das <body>-Element.
Eigenschaft links des Dokuments
Die Eigenschaft links gibt eine Sammlung aller <a>- und <area>-Elemente im Dokument zurück, die ein href-Attribut haben.
console.log(document.links);Das ist wie die Frage: "Wie viele Türen (Links) hat unser Haus?"
Eigenschaft title des Dokuments
Die Eigenschaft title gibt den Titel des aktuellen Dokuments zurück oder setzt ihn.
console.log(document.title);
document.title = "Mein neuer Titel";Das ist wie das Ändern der Namensschild auf Ihrem Haus!
Praktische Beispiele
Lassen Sie uns unser Wissen mit einigen realen Beispielen in die Praxis umsetzen:
Beispiel 1: Ändern desSeitentitels
document.title = "Willkommen bei " + document.title;
console.log("Der neue Titel ist: " + document.title);Dieses Skript fügt "Willkommen bei " an den Anfang Ihres aktuellen Seitentitels ein. Es ist wie das Hinzufügen einer freundlichen Begrüßung auf der Namensschild Ihres Hauses!
Beispiel 2: Zählen der Links
let linkCount = document.links.length;
console.log("Diese Seite hat " + linkCount + " Links.");Dieses Skript zählt, wie viele Links auf Ihrer Seite sind. Es ist wie das Zählen der Wege, das Haus zu verlassen!
Beispiel 3: Ändern des Seiteninhaltes
let newHeading = document.createElement("h2");
newHeading.textContent = "Dieser Überschrift wurde von JavaScript hinzugefügt!";
document.body.appendChild(newHeading);Dieses Skript erstellt ein neues <h2>-Element, setzt seinen Textinhalt und fügt es am Ende des <body> hinzu. Es ist wie das Hinzufügen eines neuen Raumes zu Ihrem Haus mit JavaScript!
Häufige DOM-Dokumentmethoden
Hier ist eine Tabelle einiger häufiger DOM-Dokumentmethoden:
| Methode | Beschreibung |
|---|---|
document.getElementById(id) |
Gibt das Element mit der angegebenen ID zurück |
document.getElementsByClassName(name) |
Gibt eine Sammlung von Elementen mit dem angegebenen Klassennamen zurück |
document.getElementsByTagName(name) |
Gibt eine Sammlung von Elementen mit dem angegebenen Tag-Namen zurück |
document.createElement(name) |
Erstellt ein Elementknoten |
document.createTextNode(text) |
Erstellt einen Textknoten |
document.querySelector(selector) |
Gibt das erste Element zurück, das einem CSS-Selektor entspricht |
document.querySelectorAll(selector) |
Gibt alle Elemente zurück, die einem CSS-Selektor entsprechen |
Schlussfolgerung
Glückwunsch! Sie haben Ihre ersten Schritte in die Welt der DOM-Manipulation mit JavaScript gemacht. Denken Sie daran, das DOM ist Ihr Werkzeugkasten für die Erstellung dynamischer, interaktiver Webseiten. Es ist wie ein Zauberstab, der jeden Teil Ihrer Webseite nach Belieben ändern kann!
Bei Ihrer Weiterreise werden Sie noch aufregendere Möglichkeiten der DOM-Nutzung entdecken. Üben Sie weiter, bleiben Sie neugierig und fürchten Sie sich nicht, zu experimentieren. Bevor Sie es wissen, werden Sie Webseiten bauen, die zu Ihrer JavaScript-Melodie tanzen!
Fröhliches Coden, zukünftige Webzauberer!
Credits: Image by storyset