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 hoch und runter gehangelt über document.children[0].children[0]. 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 kennen gelernt. 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-z und Zahlen von 0-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:

DOM Zugriff über document.getElementById

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;
DOM Zugriff über document.getElementById und 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 ausfolgendem Code:

document.getElementById('bereich1').innerHTML;

dann ü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 es 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, wurde unser 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 im nächsten Kapitel uns unabhängig von der Position unserer JavaScript-Anweisungen in unserer Datei machen!

weitere eigene Projekte: