HTML-Elemente durch JavaScript ändern

Die Beeinflussung von HTML-Elemente mit JavaScript läuft über DOM (Document Object Model).

Damit kann z.B. der Inhalt verändert werden, bzw. auch das Design – es kann auch auf alle CSS-Eigenschaften zugegriffen werden.

Im folgenden Beispiel haben wir ein HTML-Dokument mit einem Absatz (sprich <p>).

<p>erster Absatz im JavaScript-Kurs zur Demonstration</p>

Wie kann nun dieser Absatz angesprochen werden? Dazu versuchen wir im ersten Schritt dies über den Aufbau:

document.getElementById

Dadurch können wir das Element über eine ID (sprich eindeutige Kennzeichnung – zur Erinnerung: IDs können nur einmal pro HTML-Seite vorkommen, also nur 1 x „bereich1“) ansprechen.

Wir vergeben nun eine ID für unseren Absatz:

<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>

In unserem JavaScript erweitern wir unseren Befehl:

document.getElementById('bereich1');

Wenn wir nun das JavaScript-Programm ausführen lassen, passiert nichts, außer dass unser Text, der in HTML gesetzt wurde, auf dem Bildschirm ausgegeben wird.

Wir haben auch nicht gesagt, was mit unserem angesprochenen Element passieren soll. Also lassen wir den Inhalt in eine Variable schreiben ...

var inhalt = document.getElementById('bereich1');

und diesen dann auf der Konsole ausgeben:

console.log(inhalt);

Das komplette Programm:

<script>
var inhalt = document.getElementById('bereich1');
console.log(inhalt);
</script>
<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>

Bei der Ausführung erhalten wir nun null – noch nicht das, was wir erwarten. Das liegt daran, dass unser Programm von oben nach unten abgearbeitet wird und das Element bereich1 noch gar nicht vorhanden ist – wir sind also mit unserer JavaScript-Abfrage von diesem Inhalt zu früh dran. Auf die Schnelle setzen wir nun unseren kompletten JavaScript-Bereich unterhalb unseres Absatzes und Schwups – es funktioniert.

Es gibt auch hier fortgeschrittene Methoden, damit das JavaScript nicht ans Ende verschoben werden muss. Aber zum jetzigen Zeitpunkt ist es so in Ordnung.

<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>
<script>
var inhalt = document.getElementById('bereich1');
console.log(inhalt);
</script>

Wenn wir uns die Ausgabe in der Konsole ansehen erscheint nun:

<p id="bereich1">

Eigentlich wollten wir den Inhalt (sprich innerHTML). Kennen wir nicht die Schlüsselworte (hier innerHTML), können wir diese in Erfahrung bringen. In Firebug können wir über den Reiter DOM uns die Möglichkeiten ansehen, auf die wir zugreifen können.

Einfach im Reiter DOM dann auf den ID-Namen bereich1 klicken und wir sehen alle möglichen Werte – darunter auch vorne den innerHTML und hinten den zurzeit zugewiesenen Inhalt. Dieser kann auch direkt hier zu Testzwecken geändert werden.

Wird die Seite allerdings wieder frisch aufgerufen, dann sind hier gemachte Änderungen verloren.

Für unsere Ausgaben erweitern wir unseren console-Befehl:

<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>
<script>
var inhalt = document.getElementById('bereich1');
console.log(inhalt.innerHTML);
</script>

Elemente über getElementsByTagName() ansprechen

Haben wir auf der Seite nun mehrere Absätze (<p>) und wollen diese individuell ansprechen, ist es nicht wirklich eine Lösung, jedem eine ID mitzugeben. Wir können über getElementsByTagName auch gezielt darauf zugreifen. Der Standardfehler bei diesem Befehl ist das vergessene s im Befehl - ist die Mehrzahl, daher ist die Schreibweise getElementsByTagName!

Dazu erweitern wir unser Beispiel um einen zweiten Absatz

<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>
<p>zweiter Absatz beim JavaScript lernen</p>

Um nun den zweiten Absatz anzusprechen, wird der Name des „Node“ eingetragen.

<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>
<p>zweiter Absatz beim JavaScript lernen</p>
<script type="text/javascript">
var inhalt = document.getElementsByTagName('p');
console.log(inhalt);
</script>

Wenn wir nun das Ergebnis in der Firebug-Console ansehen, erhalten wir ein Array (Arrays sind gruppierte Informationen - zu Array später mehr).

[p#bereich1, p]

Arrays können über einen Index angesprochen werden – wir haben hier 2 Elemente. Allerdings fängt die Zählweise bei 0 an. Wenn wir also unser Zweites ansprechen wollen, benötigen wir den Index [1]:

<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>
<p>zweiter Absatz beim JavaScript lernen</p>
<script>
var inhalt = document.getElementsByTagName('p')[1].innerHTML;
console.log(inhalt);
</script>

Wir wollen also vom Index 1 (unser zweites Element) den Inhalt. In der Firebug-Console sehen wir nun den Inhalt des Zweiten.

Aufgabe:

Lassen Sie sich über den Befehl alert den Inhalt des ersten <p> ausgeben.

Änderungen von Inhalten durch JavaScript

Wenn wir nun Änderungen am Inhalt durch JavaScript durchführen lassen wollen, geht dies sehr einfach. In unser Beispiel von oben lassen wir durch JavaScript den ersten Absatz durch den Inhalt „Absatz durch JavaScript geändert“ ersetzen (zur Erinnerung: Das Zählen in einem Array beginnt bei 0 und nicht 1!).

<p id="bereich1">erster Absatz im JavaScript-Kurs zur Demonstration</p>
<p>zweiter Absatz beim JavaScript lernen</p>
<script>
document.getElementsByTagName('p')[0].innerHTML = 'Absatz durch JavaScript geändert';
</script>

Der Besucher bekommt nun auf dem Bildschirm zu sehen:

Diese Funktion wird später für unsere Aufgabe zum Beschreiben von Eingabefeldern in einem Formular benötigt. Es werden jeweils zum aktiven Formularfeld beschreibende Texte eingeblendet. Dazu benötigen wir noch weitere Informationen, die in einem späteren Kapitel kommen. Die Funktion in Aktion können Sie z.B. sehen in dem Formular zum Bestellen von Videos über HTML/CSS auf der Seite https://www.html-seminar.de/videokurs-bestellen.php

Design durch JavaScript und CSS ändern

Wir können nicht nur den Inhalt ersetzen, sondern auch in das Design über die entsprechenden CSS-Anweisungen über JavaScript eingreifen.

Hierzu wird im folgenden Beispiel die Überschrift farblich geändert. Unser Quellcode:

<h1>JavaScript Kurs für Einsteiger</h1>
<p>JavaScript lernen einfach gemacht … </p>

Da wir nur einmal den HTML-Tag <h1> auf der Seite haben (sollten), können wir diesen sehr einfach ansprechen wie vorher bereits gezeigt.

document.getElementsByTagName('h1')[0]

Was wir ändern wollen, ist über das Attribut style erreichbar:

document.getElementsByTagName('h1')[0].style

Und nun müssen wir noch die Eigenschaft angeben, die wir ändern möchten – in unserem Beispiel die Farbe, was auf Englisch im CSS unter color läuft.

document.getElementsByTagName('h1')[0].style.color = 'orange';

Und nun der komplette Quellcode:

<h1>JavaScript Kurs für Einsteiger</h1>
<p>JavaScript lernen einfach gemacht ...</p>
<script type="text/javascript">
document.getElementsByTagName('h1')[0].style.color = 'orange';
</script>

Hintergrundfarbe per JavaScript setzen

Im folgenden Beispiel wollen wir die Hintergrundfarbe über CSS setzen. Als CSS-Anweisung wäre dies background-color. Das würde so als JavaScript-Anweisung nicht funktionieren! Der Grund ist der Bindestrich. Daher werden diese Anweisungen ohne Bindestrich und anstelle dann dort mit Großbuchstaben geschrieben – also backgroundColor.

<h1>JavaScript Kurs für Einsteiger</h1>
<p>JavaScript lernen einfach gemacht ...</p>
<script type="text/javascript">
document.getElementsByTagName('h1')[0].style.backgroundColor = 'yellow';
</script>