JavaScript DOM-Manipulation

Einführung

Willkommen zum JavaScript DOM Manipulation Lab. Das Document Object Model (DOM) ist eine Programmierschnittstelle für Webdokumente. Es repräsentiert die Seite, sodass Programme die Struktur, den Stil und den Inhalt des Dokuments ändern können. Wenn eine Webseite geladen wird, erstellt der Browser ein DOM der Seite, das eine baumartige Struktur von Objekten darstellt.

In diesem Lab lernen Sie, wie Sie JavaScript verwenden, um mit dem DOM zu interagieren. Sie üben das Auswählen von Elementen, das Ändern ihres Inhalts, das Modifizieren ihrer Attribute und das dynamische Erstellen und Hinzufügen neuer Elemente zur Seite. Dies sind grundlegende Fähigkeiten für die Erstellung interaktiver und dynamischer Webanwendungen.

Nach Abschluss dieses Labs werden Sie in der Lage sein:

• Ein Element aus dem DOM anhand seiner ID auszuwählen.
• Den Inhalt eines Elements zu ändern.
• Attribute eines Elements festzulegen.
• Ein neues Element zu erstellen.
• Ein neues Element an das Dokument anzuhängen.

Legen wir los!

Element per ID mit getElementById auswählen

In diesem Schritt lernen Sie, wie Sie ein HTML-Element anhand seiner eindeutigen ID auswählen. Die Methode document.getElementById() ist eine der gebräuchlichsten Möglichkeiten, auf ein bestimmtes Element im DOM zuzugreifen.

Suchen Sie zuerst die Datei script.js im Dateiexplorer auf der linken Seite der WebIDE. Klicken Sie darauf, um sie im Editor zu öffnen. Das Setup-Skript hat diese Datei bereits für Sie erstellt.

Fügen Sie nun den folgenden Code zu script.js hinzu. Dieser Code wählt das div-Element mit der ID main-content aus und speichert es in einer Variablen namens contentDiv. Anschließend protokollieren wir dieses Element in der Konsole, um zu überprüfen, ob wir es korrekt ausgewählt haben.

const contentDiv = document.getElementById("main-content");

console.log(contentDiv);

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei script.js. Um das Ergebnis zu sehen, klicken Sie auf den Tab "Web 8080" oben in der Benutzeroberfläche. Sie werden keine visuellen Änderungen auf der Seite selbst sehen, aber Sie können die Ausgabe von console.log sehen. Um dies zu tun, öffnen Sie die Entwicklertools des Browsers (normalerweise können Sie dies tun, indem Sie mit der rechten Maustaste auf die Seite klicken und "Untersuchen" auswählen, dann zum Tab "Konsole" navigieren). Sie sollten das HTML div-Element in der Konsole sehen.

Textinhalt mit innerHTML ändern

In diesem Schritt ändern Sie den Inhalt des von Ihnen ausgewählten Elements. Die Eigenschaft innerHTML ermöglicht es Ihnen, den HTML-Inhalt innerhalb eines Elements abzurufen oder festzulegen. Dies ist eine leistungsstarke Methode, um dynamisch zu ändern, was auf Ihrer Webseite angezeigt wird.

Bearbeiten Sie weiterhin die Datei script.js. Unter dem Code, den Sie im vorherigen Schritt geschrieben haben, fügen Sie die folgende Zeile hinzu. Dies ändert den Text innerhalb des von uns ausgewählten div.

const contentDiv = document.getElementById("main-content");

// Diese Zeile ist neu
contentDiv.innerHTML = "Der Inhalt wurde von JavaScript geändert!";

console.log(contentDiv);

Stellen Sie sicher, dass Sie die Datei script.js speichern. Wechseln Sie nun zurück zum Tab "Web 8080" und aktualisieren Sie die Seite. Sie sollten sehen, dass sich der Text innerhalb des Kastens von "Dies ist der ursprüngliche Inhalt." zu "Der Inhalt wurde von JavaScript geändert!" geändert hat.

Attribut mit setAttribute-Methode setzen

In diesem Schritt lernen Sie, wie Sie Attribute eines Elements ändern, z. B. das href eines Links oder das src eines Bildes. Die Methode setAttribute() wird zu diesem Zweck verwendet. Sie nimmt zwei Argumente entgegen: den Namen des zu setzenden Attributs und den Wert, der für dieses Attribut gesetzt werden soll.

Unsere Datei index.html enthält einen Link (Tag <a>) mit der ID labex-link. Ändern wir sein href-Attribut, sodass es auf die LabEx-Website verweist.

Fügen Sie den folgenden Code zu Ihrer Datei script.js hinzu.

// Wählt das Link-Element aus
const link = document.getElementById("labex-link");

// Setzt sein href-Attribut
link.setAttribute("href", "https://labex.io");

Ihre vollständige Datei script.js sollte nun wie folgt aussehen:

const contentDiv = document.getElementById("main-content");
contentDiv.innerHTML = "The content has been changed by JavaScript!";
console.log(contentDiv);

// Wählt das Link-Element aus
const link = document.getElementById("labex-link");

// Setzt sein href-Attribut
link.setAttribute("href", "https://labex.io");

Speichern Sie die Datei, wechseln Sie zum Tab "Web 8080" und aktualisieren Sie die Seite. Wenn Sie nun mit der Maus über den Link "LabEx" fahren, sollten Sie in der Statusleiste Ihres Browsers sehen, dass er auf https://labex.io verweist. Ein Klick darauf versucht, zu dieser Seite zu navigieren.

Neues Element mit createElement erstellen

In diesem Schritt erstellen Sie ein brandneues HTML-Element von Grund auf mit JavaScript. Dies ist ein Kernbestandteil beim Erstellen dynamischer Schnittstellen, bei denen Sie möglicherweise neue Elemente zu einer Liste hinzufügen, neue Nachrichten anzeigen usw. müssen. Die Methode document.createElement() wird verwendet, um ein Element zu erstellen, das durch einen Tag-Namen angegeben wird.

Erstellen wir ein neues Absatz-Element (<p>). Fügen Sie den folgenden Code am Ende Ihrer script.js-Datei hinzu.

// Erstellt ein neues Absatz-Element
const newParagraph = document.createElement("p");

// Setzt seinen Inhalt
newParagraph.innerHTML =
  "Dies ist ein neuer Absatz, der mit JavaScript erstellt wurde.";

// Fügt eine Klasse für das Styling hinzu
newParagraph.className = "new-element";

An diesem Punkt wurde das Element im Speicher des Browsers erstellt, ist aber noch nicht auf der Seite sichtbar. Wir haben das Element erstellt, seinen Inhalt mit innerHTML gesetzt und ihm eine CSS-Klasse zugewiesen, damit es gemäß unserer style.css-Datei gestylt wird. Im nächsten Schritt lernen Sie, wie Sie dieses neue Element zum Dokument hinzufügen.

Kindelement mit appendChild anhängen

In diesem letzten Schritt fügen Sie das im vorherigen Schritt erstellte Element zur Webseite hinzu. Die Methode appendChild() fügt einen Knoten (ein Element) als letztes Kind eines Elternelements hinzu.

Zuerst müssen wir das Elternelement auswählen, in das wir unseren neuen Absatz einfügen möchten. Unsere index.html hat zu diesem Zweck ein div mit der ID container. Dann verwenden wir appendChild(), um unseren newParagraph hinzuzufügen.

Fügen Sie den folgenden Code am Ende von script.js hinzu.

// Holt das Container-Element
const container = document.getElementById("container");

// Hängt den neuen Absatz an den Container an
container.appendChild(newParagraph);

Ihre vollständige Datei script.js sollte nun den gesamten Code aus den vorherigen Schritten enthalten. Speichern Sie die Datei und aktualisieren Sie den Tab "Web 8080". Sie sollten nun den neuen, gestylten Absatz unterhalb des Links auf Ihrer Seite sehen.

Herzlichen Glückwunsch! Sie haben erfolgreich das DOM manipuliert, um Inhalte zu ändern, ein Attribut zu setzen und ein neues Element dynamisch zu erstellen und anzuzeigen.

Zusammenfassung

In diesem Lab haben Sie die grundlegenden Techniken zur Manipulation des Document Object Model (DOM) mit JavaScript gelernt. Diese Fähigkeiten sind unerlässlich für die Erstellung dynamischer und interaktiver Webseiten.

Sie haben erfolgreich geübt:

• Elemente aus dem DOM mit document.getElementById() auszuwählen.
• Den Inhalt eines Elements mit der innerHTML-Eigenschaft zu ändern.
• Attribute eines Elements mit der setAttribute()-Methode zu modifizieren.
• Neue HTML-Elemente im Speicher mit document.createElement() zu erstellen.
• Neu erstellte Elemente mit appendChild() zur Webseite hinzuzufügen.

Durch die Kombination dieser Methoden können Sie komplexe Benutzeroberflächen erstellen, die auf Benutzeraktionen reagieren und Daten dynamisch anzeigen. Gut gemacht, dass Sie dieses Lab abgeschlossen haben!