Mit JavaScript auf HTML-Elemente zugreifen

[Bildschirmfoto / Grafik]
 HTML - Dokumentenbaum

Um mit JavaScript auf HTML-Elemente zugreifen zu können gibt es verschiedene Möglichkeiten.

Die HTML-Elemente sind im DOM (Document Object Model) gespeichert. Im Browser Mozilla Firefox oder Microsoft Edge (Chromium) werden diese Elemente angezeigt wenn die Taste: F12 gedrückt und dann "Inspektor" bzw. "Elements/Elemente" ausgewählt wird.

[Bildschirmfoto / Grafik]
 HTML - Dokumentenbaum
HTML - Dokumentenbaum

Dieser Dokumentenbaum zeigt die Verteilung der HTML-Elemente der aktuellen Seite an. Möchte man nun ein bestimmtes HTML-Element ansprechen, dann muss man dessen Position im Dokumentenbaum kennen.

Einfacher geht das, wenn ein Texteditor (zum Beispiel: Notepad++, Visual Studio Code) verwendet wird, da stehen die HTML-Elemente im Quelltext darin.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Beschriftung</title>
 </head>
<body>

<h1>Beschriftung</h1>

<p>Absatz 1</p>

<p>Absatz 2</p>

</body>
</html>

document.getElementsByTagName()

Möchte man nun zum Beispiel mit JavaScript den HTML-Tag <h1> ansprechen, wird dies mit folgender Anweisung gemacht:

document.getElementsByTagName("h1")[0]. …

h1 ist der Name des HTML-Elements und der Wert: 0 dessen Position im Dokument. Dabei ist 0 das erste Element im Dokument.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Beschriftung</title>
 </head>
<body>

<h1>Beschriftung</h1>

<p>Absatz 1</p>

<p>Absatz 2</p>

<script>
document.getElementsByTagName("h1")[0].textContent = "Hallo Welt!";
</script>

</body>
</html>

Ein weiteres Beispiel soll dies verdeutlichen, um auf den zweiten Absatz mit dem HTML-Element <p> zuzugreifen, wird folgende Anweisung genommen:

document.getElementsByTagName("p")[1]. …

Der Nachteil mit dieser Anweisung ist, das mit jeder Änderung des Dokuments sich die Position des HTML-Elements verschieben kann. Der "Absatz 1" braucht nur unterhalb von "Absatz 2" stehen, und schon wird das falsche HTML-Element ausgewählt.
Die einfachste Lösung ist es, für HTML-Elemente IDs zu vergeben, damit kann ein Element direkt angesprochen werden, egal wo es im Dokument liegt (siehe folgendes Beispiel).

document.getElementById()

Ein Element direkt über die ID ansprechen. Die Anweisung in JavaScript ist relativ einfach:

document.getElementById("absatz2"). …

• Hier ein Beispiel wie das mit JavaScript umgesetzt wird:

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Beschriftung</title>
 </head>
<body>

<h1>Beschriftung</h1>

<p>Absatz 1</p>

<p id="absatz2">Absatz 2</p>

<script>
document.getElementById("absatz2").textContent = "Hallo Welt!";
</script>

</body>
</html>

Mit textContent wird der Inhalt zwischen den <p>-Tags mit der ID: "absatz2" von: „Absatz 2” zu: „Hallo Welt!” geändert.

Möchte man nun anstatt reinen Text auch HTML-Tags einfügen, so nimmt man anstatt textContent die Anweisung innerHTML:

document.getElementById("absatz2").innerHTML = "<b>Hallo Welt!</b>";

document.querySelector()

Eine weitere Möglichkeit um eine ID innerhalb eines Dokuments anzusprechen ist über die Anweisung document.querySelector("#ID"), Dazu wird nach dem Nummernzeichen (#) die ID eingefügt:

document.querySelector("#absatz2").textContent = "Hallo Welt!";

document.getElementsByName()

Mit document.getElementsByName gibt es eine weitere Möglichkeit auf HTML-Elemente zuzugreifen:

<textarea name="eingabe"></textarea>

<script>
document.getElementsByName("eingabe")[0].value = "Hallo Welt!";
</script>

Dieses Script fügt im <textarea>-Tag den Inhalt (value) „Hallo Welt!” ein. Da das Name-Attribut mehrfach im Dokument vorkommen kann, ist auch hier die Position des Elements (0) anzugeben.

document.getElementsByClassName()

Mit JavaScript auf das HTML-Element über das class-Attribut zugreifen:

<textarea class="area"></textarea>

<script>
document.getElementsByClassName("area")[0].style.backgroundColor = "yellow";
</script>

Dieses Script färbt den Hintergrund des <textarea>-Tags gelb ein.

Manipulationsmöglichkeiten mit JavaScript

Einige Manipulationsmöglichkeiten haben wir bereits kennen gelernt (textContent, innerHTML, value, style.backgroundColor) es gibt aber noch viele mehr, hier eine kleine Liste:

document.getElementById("xx"). // und dann ... style.color = "Red"; Das Element erhält eine rote Schriftfarbe. style.color = "#00FF00"; Das Element erhält eine grüne Schriftfarbe. title = "Das ist ein Titel"; Das Element erhält einen Title-Attribut. src = "bild2.png"; Wenn das Element ein Bild ist, dann wird hiermit die Adresse des Bildes ausgetauscht. addEventListener("click", test); Wenn auf das Element geklickt wird, dann wird die JavaScript-Funktion test() aufgerufen. classList.add("hintergrund"); Fügt die CSS-Klasse: hintergrund hinzu. classList.remove("hintergrund"); Entfernt die CSS-Klasse: hintergrund.

Auf Elemente in einem Formular zugreifen

Eine andere Möglichkeit ist es, direkt über den Namen des Formulars auf ein Eingabefeld zuzugreifen.
Das Formular bekommt zum Beispiel den Namen: Form. Die beiden Eingabefelder die Namen: name und land.

Das komplette Script:

<form name="Form" method="post">

<p>
 <label>Name: <input type="text" name="name"></label>
</p>

<p>
 <label>Land: <input type="text" name="land"></label>
</p>

<p>
 <button type="button" id="senden">Senden</button>
</p>

</form>

<script>
document.getElementById("senden").addEventListener("click", () => {
 
  if (document.Form.name.value == "" ||
      document.Form.land.value.length < 5) {
    alert("Bitte ausfüllen!");
  }
  else {
   // mach was ...
  }
 
});
</script>

Um die JavaScript-Funktion zu starten, weisen wir den HTML-Button <button id="senden"> über:

document.getElementById("senden").addEventListener("click", () => { einen Funktionsaufruf zu.

Dabei ist: click ein Event-Handler der eine Interaktion mit dem Benutzer übernimmt.

Beispiel:

Auf mehrere Elemente zugreifen

Um nun nicht für jedes HTML-Element das hinzugefügt wird eine Anweisung zu schreiben, ist es möglich die Anzahl der Elemente zu zählen:

var laenge = document.querySelectorAll(".absatz").length;

Die JavaScript-Variable: laenge enthält nun die Anzahl der Elemente (4) mit der CSS-Klasse: absatz.

Nun wird über eine for-Schleife:

for (var i = 0; i < laenge; i++) { … für jedes Element die CSS-Klasse: hintergrund hinzugefügt:

document.getElementsByClassName("absatz")[i].classList.add("hintergrund");

Das komplette Script:

<style>
.hintergrund {
 background-color: Yellow;
 padding: 5px;
 border: Solid 2px #00DB00;
 width: 350px;
}
</style>

<p class="absatz">Absatz 1</p>
<p class="absatz">Absatz 2</p>
<p class="absatz">Absatz 3</p>
<p class="absatz">Absatz 4</p>

<script>
var laenge = document.querySelectorAll(".absatz").length;

for (var i = 0; i < laenge; i++) {
 document.getElementsByClassName("absatz")[i].classList.add("hintergrund");
}
</script>

Beispiel:

Absatz 1

Absatz 2

Absatz 3

Absatz 4

Eine Alternative Möglichkeit mit forEach:

<style>
.hintergrund {
 background-color: Yellow;
 padding: 5px;
 border: Solid 2px #00DB00;
 width: 350px;
}
</style>

<p class="absatz">Absatz 1</p>
<p class="absatz">Absatz 2</p>
<p class="absatz">Absatz 3</p>
<p class="absatz">Absatz 4</p>

<script>
var elemente = document.querySelectorAll('.absatz');

elemente.forEach(function(element) {
 element.classList.add("hintergrund");
});
</script>

Überprüfen ob ein Element im Dokument vorhanden ist

Wenn ein Element nicht im Dokument vorhanden ist, gibt es eine JavaScript-Fehlermeldung, diese Fehlermeldung wird in der Browser-Konsole angezeigt. Um dies zu vermeiden, kann mit:

if (document.getElementById("element")) { … dies überprüft werden.