DOM nutzen über getElementById()
Um auf ein gewünschtes Element unserer HTML-Seite zugreifen zu können, haben wir uns im letzten Kapitel mühevoll wie Affen unseren DOM-Baum über document.children[0].children[0] hoch und runter gehangelt. Das macht weder besonders Spaß noch ist es sonderlich übersichtlich. Und bekanntlich ist Chaos der Tod des Programmierers. Daher schauen wir uns die komfortable Möglichkeit über getElementById() an.
Wir wollen ein bestimmtes Element auf unserer HTML-Seite ansprechen. Das Beispiel aus dem letzten Kapitel ergänzen wir um zwei HTML-Absätze.
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<h1>Überschrift 1</h1>
<p>Erster Absatz mit Text</p>
<p>Zweiter Absatz mit Text</p>
<a href="https://www.javascript-kurs.de/">Text des Links</a>
</body>
</html>
Wie können wir nun über JavaScript gezielt z.B. den ersten Absatz ansprechen? Dazu verwenden wird die JavaScript-Anweisung getElementById().
Unser gewünschtes Element benötigt nun eine eindeutige Kennzeichnung. Diese eindeutige Kennzeichnung haben wir bereits bei CSS kennengelernt. Wir können jedes beliebige HTML-Element mit dem Attribut id und einem eindeutigen Namen direkt im HTML-Code versehen. Hier gelten die aus CSS bekannten Regeln für einen eindeutigen Namen:
- keine Leerzeichen
- keine Bindestriche
- keine Sonderzeichen (also am besten nur Buchstaben von a bis z und Zahlen von 0 bis 9 verwenden)
Versehen wir in unserem Beispiel also unseren ersten Absatz mit dem HTML-Attribut id und dem Namen bereich1. Hier der Ausschnitt des erweiterten HTML-Codes:
<p id="bereich1">Erster Absatz mit Text</p>
Unseren JavaScript-Befehl getElementById() können wir nun mit dem Namen erweitern. Zusätzlich sagen wir über document., dass das aktuelle HTML-Dokument (sprich unser DOM-Baum) genutzt werden soll:
document.getElementById('bereich1');
Wenn wir unser JavaScript-Programm ausführen lassen, passiert noch nichts Sichtbares.
Allerdings können wir auch über die Konsole den Inhalt unseres bereich1 über getElementById abrufen:
Wir sehen, wir können nun auf ein bestimmtes Element zugreifen.
In unserem Element steckt der komplette HTML-Befehl und der vom Befehl umschlossene Inhalt "Erster Absatz mit Text" – also der gesamte ausgewählte Ast samt aller Zweige und Blätter unseres DOM-Baumes.
Wollen wir nur den Text und nicht den kompletten Zweig – sprich, wir wollen keine HTML-Befehle und Attribute zurückgeliefert bekommen – bietet uns JavaScript die Erweiterung über innerHTML.
document.getElementById('bereich1').innerHTML;
Natürlich werden durch diese Punktnotationen die Anweisungen in JavaScript immer länger und somit auch immer unübersichtlicher. Und öfters benötigt man wiederholt Zugriff auf das gleiche Element. Daher baut man dann aus folgendem Code
document.getElementById('bereich1').innerHTML;
über die Nutzung einer Variablen sehr gerne die folgende Konstruktion:
let absatz1 = document.getElementById('bereich1');
console.log(absatz1.innerHTML);
console.log(absatz1);
alert(absatz1.innerHTML);
Bitte unser bestehendes Programm erweitern und schauen, ob eine Ausgabe in der Konsole erfolgt. Hier gibt es eine 50 % Chance, dass es klappt (abgesehen von Tippfehlern).
Bitte erst probieren, bevor weitergelesen wird!
Wirklich!
Hat es funktioniert? Kam die erwartete Ausgabe? Dann wurde unser JavaScript-Programm nach den HTML-Ausgaben in der Datei eingefügt:
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<h1>Überschrift 1</h1>
<p id="bereich1">Erster Absatz mit Text</p>
<p>Zweiter Absatz mit Text</p>
<a href="https://www.javascript-kurs.de/">Text des Links</a>
<script>
let absatz1 = document.getElementById('bereich1');
console.log(absatz1.innerHTML);
console.log(absatz1);
alert(absatz1.innerHTML);
</script>
</body>
</html>
Hat es nicht funktioniert, wurden unsere JavaScript-Anweisungen vor den HTML-Ausgaben der Absätze eingefügt. Dann kommen keine Inhalte, sondern Fehlermeldungen in Form von "Uncaught TypeError: Connot read property …".
Bitte unbedingt probieren, da wir uns im nächsten Kapitel unabhängig von der Position unserer JavaScript-Anweisungen in unserer Datei machen!