JavaScript - Dokument Objekt

Hallo, ambitionierte Programmierer! Heute tauchen wir in die faszinierende Welt des JavaScript-Dokument-Objekts ein. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie auf dieser Reise Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Lassen Sie uns gemeinsam dieses Abenteuer beginnen!

JavaScript - Document Object

Fenster Dokument Objekt

Wenn Sie mit JavaScript in einem Webbrowser arbeiten, eines der wichtigsten Dinge, mit denen Sie interagieren werden, ist das Dokument-Objekt. Bevor wir jedoch dazu kommen, lassen Sie uns seinen Eltern understand: das Fenster-Objekt.

Stellen Sie sich Ihren Webbrowser als Haus vor. Das Fenster-Objekt verkörpert das gesamte Haus, während das Dokument-Objekt wie der Hauptwohnzimmer ist, wo die meisten Aktionen stattfinden. Alles, was Sie in Ihrem Browser-Fenster sehen, ist Teil des Fenster-Objekts, und der Webseiteninhalt ist spezifisch Teil des Dokument-Objekts.

Hier ist ein einfaches Beispiel, um dies zu verdeutlichen:

console.log(window.document === document); // Ausgabe: true

Dies zeigt, dass document eigentlich eine Eigenschaft des window-Objekts ist, aber wir können es direkt als document zugreifen, um es bequemer zu machen.

JavaScript Dokument Objekt Eigenschaften

Nun, da wir verstehen, wo das Dokument-Objekt hineinpasst, lassen Sie uns einige seiner Eigenschaften erkunden. Diese Eigenschaften ermöglichen es uns, verschiedene Teile unserer Webseite zugreifen und manipulieren.

1. document.title

Diese Eigenschaft ermöglicht es Ihnen, die Titel Ihrer Webseite zu erhalten oder zu setzen – Sie wissen, der Text, der in der Browser-Tab angezeigt wird.

console.log(document.title); // Gibt den aktuellenSeitentitel aus
document.title = "MeineAwesomeSeite"; // Ändert den Seitentitel

2. document.body

Dies gibt Ihnen Zugriff auf das <body>-Element Ihres HTML-Dokuments.

document.body.style.backgroundColor = "hellblau";

Diese Zeile würde die Hintergrundfarbe Ihrer gesamten Seite in Hellblau ändern. quite cool, oder?

3. document.URL

Diese schreibgeschützte Eigenschaft gibt Ihnen die vollständige URL der aktuellen Seite.

console.log(document.URL); // Gibt etwas wie "https://www.beispiel.com/page.html" aus

JavaScript Dokument Objekt Methoden

Methoden sind wie die Superkräfte unseres Dokument-Objekts. Sie ermöglichen es uns, alle möglichen interessanten Dinge mit unserer Webseite zu tun.

1. document.getElementById()

Dies ist wahrscheinlich die Methode, die Sie am häufigsten verwenden werden. Es ermöglicht Ihnen, ein Element aus Ihrem HTML mit seiner ID zu erfassen.

let meinElement = document.getElementById("meineSpecialDiv");
meinElement.innerHTML = "Hallo, ich wurde von JavaScript geändert!";

In diesem Beispiel finden wir ein Element mit der ID "meineSpecialDiv" und ändern dessen Inhalt.

2. document.createElement()

Diese Methode ermöglicht es Ihnen, neue HTML-Elemente von Grund auf neu zu erstellen!

let neuerAbsatz = document.createElement("p");
neuerAbsatz.textContent = "Ich bin ein neuer Absatz, freut mich, Sie kennenzulernen!";
document.body.appendChild(neuerAbsatz);

Hier erstellen wir ein neues Absatz-Element, setzen seinen Text und fügen es an das Ende unseres Dokument-Körpers hinzu.

3. document.querySelector()

Diese leistungsstarke Methode ermöglicht es Ihnen, Elemente mit CSS-Selektoren auszuwählen.

let ersterKnopf = document.querySelector("button");
ersterKnopf.style.color = "rot";

Dies würde den ersten Knopf auf Ihrer Seite finden und seine Textfarbe rot machen.

Dokument Objekt Eigenschaften Liste

Lassen Sie uns einige wichtige Eigenschaften des Dokument-Objekts in einer praktischen Tabelle zusammenfassen:

Eigenschaft	Beschreibung
document.title	Der Titel des aktuellen Dokuments
document.body	Das `<body>`-Element
document.head	Das `<head>`-Element
document.URL	Die vollständige URL des Dokuments
document.domain	Der Domänenname des Dokument-Servers
document.lastModified	Das Datum, an dem das Dokument zuletzt geändert wurde

Dokument Objekt Methoden Liste

Und hier ist eine Tabelle einiger wichtiger Dokument-Objekt-Methoden:

Methode	Beschreibung
document.getElementById()	Gibt das Element mit der angegebenen ID zurück
document.getElementsByClassName()	Gibt eine Sammlung von Elementen mit dem angegebenen Klassennamen zurück
document.getElementsByTagName()	Gibt eine Sammlung von Elementen mit dem angegebenen Tag-Namen zurück
document.querySelector()	Gibt das erste Element zurück, das einem CSS-Selektor entspricht
document.querySelectorAll()	Gibt alle Elemente zurück, die einem CSS-Selektor entsprechen
document.createElement()	Erstellt ein neues HTML-Element
document.write()	Schreibt HTML-Ausdrücke oder JavaScript-Code in ein Dokument

Denken Sie daran, dass das Lernen, das Dokument-Objekt zu manipulieren, wie das Lernen, ein Zauberer in der Welt der Webentwicklung zu werden. Mit diesen Werkzeugen können Sie Ihre Webseiten zum Leben erwecken und auf erstaunliche Weise auf Benutzeraktionen reagieren.

Als wir diese Lektion beenden, erinnere ich mich an eine Schülerin, die initially von all diesen Eigenschaften und Methoden überwältigt war. Aber mit der Übung wurde sie so versiert, dass sie Webseiten im Schlaf manipulieren konnte! (Na ja, fast.) Der Schlüssel ist, zu experimentieren und Spaß daran zu haben.

Also, meine lieben Schüler, haben Sie keine Angst, mit diesen Konzepten herumzuspielen. Versuchen Sie, den Titel dieser Seite zu ändern oder ein neues Element zu erstellen und es zum Körper hinzuzufügen. Je öfter Sie üben, desto natürlicher wird es. Bevor Sie es wissen, werden Sie interaktive Weberlebnisse wie ein Profi erstellen!

Happy Coding und denken Sie daran – in der Welt der Programmierung ist Neugier Ihr größtes Kapital. Weiter erkunden, weiter fragen und vor allem weiter codieren!

Credits: Image by storyset

Vorheriges Tutorial:

JavaScript - Fenster-Objekt

Nächstes Tutorial:

JavaScript - Bildschirmobjekt