Zugriff auf die Dokumenttitel-Eigenschaft
In diesem Schritt lernen Sie, wie Sie die Dokumenttitel-Eigenschaft mithilfe von JavaScript zugreifen. Wir bauen auf der im vorherigen Schritt erstellten HTML-Datei auf und demonstrieren, wie Sie den Titel des Dokuments abrufen und manipulieren.
Erstellen Sie in der WebIDE in das Verzeichnis ~/project eine neue Datei namens script.js. Fügen Sie den folgenden JavaScript-Code hinzu:
// Zugriff auf den Dokumenttitel
console.log("Dokumenttitel:", document.title);
// Ändern des Dokumenttitels
function changeTitle() {
document.title = "Aktualisiertes DOM-Eigenschaften-Lab";
console.log("Neuer Dokumenttitel:", document.title);
}
// Hinzufügen eines Buttons, um die Titeländerung zu demonstrieren
const button = document.createElement("button");
button.textContent = "Titel ändern";
button.onclick = changeTitle;
document.body.appendChild(button);
Aktualisieren Sie nun die Datei index.html, um die JavaScript-Datei hinzuzufügen:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>DOM Properties Exploration</title>
</head>
<body>
<h1>Willkommen im DOM-Eigenschaften-Lab</h1>
<p>
Diese Seite wird uns helfen, JavaScript DOM-Eigenschaften zu erkunden.
</p>
<img src="https://example.com/sample-image.jpg" alt="Sample Image" />
<img src="https://example.com/another-image.jpg" alt="Another Image" />
<script src="script.js"></script>
</body>
</html>
Wenn Sie diese HTML-Datei in einem Browser öffnen, werden Sie die folgenden Verhaltensweisen beobachten:
Beispielausgabe in der Browserkonsole:
Dokumenttitel: DOM Properties Exploration
Wenn Sie auf den Button "Titel ändern" klicken:
Neuer Dokumenttitel: Aktualisiertes DOM-Eigenschaften-Lab
Demonstrierte Schlüsselkonzepte:
- Die
document.title-Eigenschaft ruft den aktuellen Seitentitel ab
- Sie können den Dokumenttitel dynamisch mithilfe von JavaScript ändern
- Der Titel erscheint in der Browserregisterkarte und kann zur Laufzeit geändert werden
