256 Kapitel 6
Den Wert eines Attributs auslesen
Mehr Spaß mit Attributen!
(Sie können Attribute auch lesen.)
var scoop = document.getElementById("Himbeere");
var altText = scoop.getAttribute("alt");
console.log("Die Konsole stellt keine Bilder dar,");
console.log(" aber man hat mir gesagt, was zu sehen ist: " + altText);
Sie brauchen den Attributwert eines HTML-
Elements? Kein Problem. Mithilfe der Methode
getAttribute können Sie den Wert auszulesen.
Was passiert, wenn das Element kein
Attribut dieses Namens hat?
Besorgen Sie sich per getElementById eine
Referenz auf das Element und verwenden
Sie dann seine getAttribute-Methode, um
den Attributwert auszulesen.
Übergeben Sie den
Namen des Attributs,
dessen Wert Sie
brauchen.
Wissen Sie noch, was beim Aufruf von getElementById
passiert, wenn das Element im DOM nicht existiert? Dann
wird null zurückgegeben. Das können Sie folgendermaßen
überprüfen:
var scoop = document.getElementById("Himbeere");
var altText = scoop.getAttribute("alt");
if (altText == null) {
console.log("Oh, ich glaube, es gibt kein alt-Attribut.");
} else {
console.log("Die Konsole stellt keine Bilder dar,");
console.log(" aber man hat mir gesagt, was zu sehen ist: " + altText);}
Überprüfen, ob tatsächlich ein
Attributwert zurückgegeben wurde.
Der Aufruf von getElementById kann null zurückgeben, wenn ein Element mit
dieser ID im DOM nicht existiert. Die beste Vorgehensweise dabei ist, auch beim
Auslesen von Elementen auf den Rückgabewert null zu testen. Wir könnten das
hier in jedem Beispiel tun, aber dann wäre das Buch locker 1000 Seiten länger.
Vergessen Sie nicht, dass getElementById auch
null zurückgeben kann!
Daher sollten Sie bei jeder Abfrage überprüfen, ob der Rückgabewert Ihren
Erwartungen entspricht.
Gibt es keinen Attributwert,
machen wir das hier …
… ansonsten können
wir den Textinhalt
auf der Konsole
ausgeben.
Sie sind hier � 257
Interaktion mit der Webseite
Zur gleichen Zeit im Sonnensytem…
Jetzt sind wir so weit, dass wir unseren Planetencode zusammenbauen und endgültig testen können.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Planeten</title>
<style>
.warnmeldung { color: red; }
</style>
<script>
function init() {
var planet = document.getElementById("gruener_planet");
planet.innerHTML = "Roter Alarm: vom Phaser getroffen!";
planet.setAttribute("class", "warnmeldung");
}
window.onload = init;
</script>
</head>
<body>
<h1>Grüner Planet</h1>
<p id="gruener_planet">Alles in Ordnung</p>
<h1>Roter Planet</h1>
<p id="roter_planet">Nichts zu berichten</p>
<h1>Blauer Planet</h1>
<p id="blauer_planet">Alle Systeme OK</p>
</body>
</html>
Letzte Probefahrt für die Planeten …
Wenn Sie die Seite in Ihrem Browser aufrufen, sehen
Sie, wie der grüne Planet vom Phaser getroffen wird. Die
Nachricht wird jetzt in roter Schrift angezeigt, damit sie
auf keinen Fall übersehen wird!
Hier ist der gesamte HTML-, CSS-
und JavaScript-Code für die Planeten.
Die Klasse »warnmeldung« ist angelegt. Wenn wir
im Code für ein Element das »class«-Attribut
mit dem Wert »warnmeldung« versehen, wird der
Text im Element rot dargestellt.
Wir holen uns das Elementobjekt
für die ID »gruener_planet«
und speichern es in der Variablen
planet. Dann ändern wir den
Inhalt des Elements und geben
ihm ein Klassenattribut, das den
enthaltenen Text rot einfärbt.
Erst wenn die Seite komplett geladen ist,
wird die init-Funktion aufgerufen.
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
