Mit JavaScript auf HTML-Elemente zugreifen (Tutorial)

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

[Bildschirmfoto / Grafik]
 HTML - Dokumentenbaum

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 (document.getElementById()).

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 ein 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.

Liste der CSS Schreibweisen in JavaScript

Beispiel, aus CSS: background-attachment wird JavaScript: backgroundAttachment. Der Bindestrich entfällt und das nächste Wort beginnt mit einem Großbuchstaben.

JavaScript-Angabe Beschreibung CSS-Angabe
background Hintergrund background
backgroundAttachment Wasserzeichen-Effekt background-attachment
backgroundColor Hintergrundfarbe background-color
backgroundImage Hintergrundbild background-image
backgroundPosition Position des Hintergrundbilds background-position
backgroundRepeat Wallpaper-Effekt background-repeat
border Rahmen border
borderBottom Rahmen unten border-bottom
borderBottomColor Rahmenfarbe unten border-bottom-color
borderBottomStyle Rahmenart unten border-bottom-style
borderBottomWidth Rahmendicke unten border-bottom-width
borderColor Rahmenfarbe border-color
borderLeft Rahmen links border-left
borderLeftColor Rahmenfarbe links border-left-color
borderLeftStyle Rahmenart links border-left-style
borderLeftWidth Rahmendicke links border-left-width
borderRight Rahmen rechts border-right
borderRightColor Rahmenfarbe rechts border-right-color
borderRightStyle Rahmenart rechts border-right-style
borderRightWidth Rahmendicke rechts border-right-width
borderStyle Rahmenart border-style
borderTop Rahmen oben border-top
borderTopColor Rahmenfarbe oben border-top-color
borderTopStyle Rahmenart oben border-top-style
borderTopWidth Rahmendicke oben border-top-width
borderWidth Rahmendicke border-width
bottom Position von unten bottom
captionSide Tabellenbeschriftung caption-side
clear Fortsetzung bei Textumfluss clear
clip Anzeigebereich eingrenzen clip
color Textfarbe color
cursor Mauszeiger cursor
direction Schreibrichtung direction
display Sichtbarkeit (ohne Platzhalter) display
emptyCells Darstellung leerer Tabellenzellen empty-cells
font Schrift font
fontFamily Schriftart font-family
fontSize Schriftgröße font-size
fontStretch Schriftlaufweite font-stretch
fontStyle Schriftstil font-style
fontVariant Schriftvariante font-variant
fontWeight Schriftgewicht font-weight
height Höhe eines Elements height
left Position von links left
letterSpacing Zeichenabstand letter-spacing
lineHeight Zeilenhöhe line-height
listStyle Listendarstellung list-style
listStyleImage Grafik für Aufzählungslisten list-style-image
listStylePosition Listeneinrückung list-style-position
listStyleType Darstellungstyp der Liste list-style-type
margin Abstand/Rand margin
marginBottom Abstand/Rand unten margin-bottom
marginLeft Abstand/Rand links margin-left
marginRight Abstand/Rand rechts margin-right
marginTop Abstand/Rand oben margin-top
maxHeight Maximalhöhe max-height
maxWidth Maximalbreite max-width
minHeight Mindesthöhe min-height
minWidth Mindestbreite min-width
overflow übergroßer Inhalt overflow
padding Innenabstand padding
paddingBottom Innenabstand unten padding-bottom
paddingLeft Innenabstand links padding-left
paddingRight Innenabstand rechts padding-right
paddingTop Innenabstand oben padding-top
pageBreakAfter Seitenumbruch danach page-break-after
pageBreakBefore Seitenumbruch davor page-break-before
position Positionsart position
right Position von rechts right
tableLayout Tabellentyp table-layout
textAlign Ausrichtung text-align
textDecoration Textdekoration text-decoration
textIndent Texteinrückung text-indent
textTransform Text-Transformation text-transform
top Position von oben top
verticalAlign vertikale Ausrichtung vertical-align
visibility Sichtbarkeit (mit Platzhalter) visibility
width Breite eines Elements width
wordSpacing Wortabstand word-spacing
zIndex Schichtposition bei Überlappung z-index

Auf Elemente in einem Formular zugreifen

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

Beispiel:

Quelltext:

<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.

Auf mehrere Elemente gleichzeitig zugreifen / document.querySelectorAll()

Beispiel:

Weit hinten, hinter den Wortbergen.

Fern der Länder Vokalien und Konsonantien leben die Blindtexte.

Abgeschieden wohnen Sie in Buchstabhausen.

Ein kleines Bächlein namens Duden fließt.

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");

Quelltext:

<style>
.hintergrund {
 background-color: Lightyellow;
 padding: 5px;
 border: Solid 2px Orange;
 width: 350px;
}
</style>

<p class="absatz">Weit hinten, hinter den Wortbergen</p>
<p class="absatz">Fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>
<p class="absatz">Abgeschieden wohnen Sie in Buchstabhausen.</p>
<p class="absatz">Ein kleines Bächlein namens Duden fließt.</p>

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

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

➤ Eine Alternative Möglichkeit mit forEach:

<style>
.hintergrund {
 background-color: Lightyellow;
 padding: 5px;
 border: Solid 2px Orange;
 width: 350px;
}
</style>

<p class="absatz">Weit hinten, hinter den Wortbergen.</p>
<p class="absatz">Fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>
<p class="absatz">Abgeschieden wohnen Sie in Buchstabhausen.</p>
<p class="absatz">Ein kleines Bächlein namens Duden fließt.</p>

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

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

Mögliche Werte von querySelectorAll():

querySelectorAll('.meine-klasse') …
querySelectorAll('a.meine-klasse') …
querySelectorAll('[class="meine-klasse"]') …
querySelectorAll('.klasse1, .klasse2, .klasse3') … // Liste von Klassen
querySelectorAll('[class="test"], [class="test2"]') … // Liste von Attributen
querySelectorAll('#id1, #id2, #id3') … // Liste von IDs
querySelectorAll('input[name="test[]"]') … // Formular-Attribut (Checkbox)
querySelectorAll('input[name="test[]"]:checked') … // Formular-Attribut (Checkbox, ausgewählt)
querySelectorAll('button[data-farben]')  … // data-* Attribut
querySelectorAll('div[data-gruppe="4711"]')  … // data-* Attribut
querySelectorAll('a[target="_blank"]')  … // Link-Target Attribut
querySelectorAll('th.vertical span')  … // <th class="vertical"> <span> </th>

a[target="_blank"]
a = HTML-Element
[] = Attributsselektoren
target="_blank" = Attribut

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Mehrere JavaScript: Event-Handler hinzufügen

Beim anklicken eines Absatzes soll dessen Textinhalt unten ausgegeben werden.

Mit addEventListener('click' … wird der Event-Handler: click den HTML-Elementen zugewiesen.

Beispiel:

Weit hinten, hinter den Wortbergen.

Fern der Länder Vokalien und Konsonantien leben die Blindtexte.

Abgeschieden wohnen Sie in Buchstabhausen.

Ein kleines Bächlein namens Duden fließt.

Ausgabe!

Quelltext:

<style>
.hintergrund2 {
 background-color: Lightyellow;
 padding: 5px;
 outline: Solid 2px Orange;
 width: 350px;
}

.hintergrund2:hover {
 outline: Solid 3px Tomato;
 cursor: pointer;
}

div#ausgabe {
 color: Dodgerblue;
}
</style>

<p class="satz">Weit hinten, hinter den Wortbergen.</p>
<p class="satz">Fern der Länder Vokalien und Konsonantien leben die Blindtexte.</p>
<p class="satz">Abgeschieden wohnen Sie in Buchstabhausen.</p>
<p class="satz">Ein kleines Bächlein namens Duden fließt.</p>

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

elemente.forEach((element) => {
 element.classList.add("hintergrund2");

   element.addEventListener('click', (e) => {
       document.getElementById("ausgabe").textContent = e.target.textContent;
   });

});
</script>

<div id="ausgabe">Ausgabe!</div>

Überprüfen ob ein Element im Dokument vorhanden ist

Wenn ein Element nicht im Dokument vorhanden ist und das Script soll darauf zugreifen, gibt es eine Fehlermeldung, diese Fehlermeldung wird in der Browser-Konsole angezeigt. Um dies zu vermeiden, kann mit:
if (document.getElementById("element")) { …
dies überprüft werden.


Siehe auch: CSS-Stile mit JavaScript auf ein Element anwenden