Mit JavaScript auf HTML-Elemente zugreifen (Tutorial)

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.

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>
querySelectorAll(`input[name *= "${beitrag}"]`)  …

Beispiel:
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>

Die HTML-Link Funktionalität mit CSS und JavaScript nachgebaut


<style>

    span[data-link] {

        color: Royalblue;

        cursor: pointer;



        &:hover {

            text-decoration: underline;

        }

    }

</style>



<script>

    window.addEventListener("DOMContentLoaded", () => {

        document.querySelectorAll('span[data-link]').forEach((element) => {

            element.addEventListener("click", (e) => {

                let seite = e.target.dataset.link;

                window.location.href = seite;

            });

        });

    });

</script>



<span data-link="seite1.htm">Seite 1</span> -

<span data-link="seite2.htm#zwei">Seite 2</span> -

<span data-link="seite3.htm?test=3">Seite 3</span>

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