DOM manipulieren: die HTML-Seite mit JavaScript ändern

Das DOM (Document Object Model) ist ein System, das die Elemente eines HTML-Dokuments als Objekte darstellt, die sich mit der Programmiersprache JavaScript bearbeiten lassen. Das heißt: Wenn du JavaScript nutzt, um mit dem DOM zu arbeiten, kannst du HTML-Elemente deiner Webseite hinzufügen, entfernen, ändern oder auf sie zugreifen.

In diesem Beispiel arbeiten wir mit dem folgenden HTML-Code, um die verschiedenen Techniken der DOM-Manipulation zu zeigen:

<div id="container">
  <h1 class="title">Mon titre</h1>
  <p class="description">Ma description</p>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

Knoten im DOM auswählen

Um das DOM zu bearbeiten, musst du zuerst die Knoten auswählen, die du ändern willst. Dafür gibt es in JavaScript mehrere Methoden:

• Die Methode document.getElementById wählt einen Knoten anhand seiner ID aus. Um zum Beispiel das div mit der ID „container“ auszuwählen, schreibst du:

const container = document.getElementById('container');

• Die Methode document.getElementsByClassName wählt eine Liste von Knoten anhand ihrer Klasse aus. Um zum Beispiel alle li-Elemente mit der Klasse „item“ auszuwählen, schreibst du:

const items = document.getElementsByClassName('item');

• Die Methode document.querySelector wählt den ersten Knoten aus, der zu einem CSS-Selektor passt. Um zum Beispiel das erste li-Element der Liste auszuwählen, schreibst du:

const firstItem = document.querySelector('li');

Diese Methode gibt das erste Element zurück, das dem angegebenen Selektor entspricht. Wird keines gefunden, ist der Rückgabewert null.

• Die Methode document.querySelectorAll arbeitet ähnlich, gibt aber eine Liste mit allen Knoten zurück, die dem angegebenen Selektor entsprechen. Zum Beispiel:

const items = document.querySelectorAll('li');

Damit wählst du mehrere Elemente auf einmal aus. Durchlaufen kannst du sie mit einer Schleife, wie im Kapitel über Schleifen gezeigt.

Wenn du das Kapitel über Schleifen gelesen hast: Du kannst die Methode forEach des Array-Objekts zusammen mit document.querySelectorAll('li') einsetzen, und zwar so:

document.querySelectorAll('li').forEach(function(li) {
  // Code, der für jedes li-Element ausgeführt wird
});

Dieser Code wählt alle li-Elemente der Seite aus und führt für jedes davon bestimmten Code aus. Willst du zum Beispiel jedem li-Element ein „click“-Ereignis mitgeben, geht das so:

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    console.log("L'élément li a été cliqué !");
  });
});

Statt der anonymen Funktion kannst du auch eine Pfeilfunktion nehmen:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log("L'élément li a été cliqué !");
  });
});

• Elemente lassen sich außerdem über ihre IDs oder ihre Klassen auswählen, genau wie in CSS. Zum Beispiel:

const container = document.querySelector('#container');
const title = document.querySelector('.title');

Mit dieser Syntax wählst du Elemente anhand ihrer IDs oder ihrer Klassen aus. Das ist praktisch, wenn du genau diese Elemente in JavaScript bearbeiten willst.

Es gibt in JavaScript viele weitere Wege, Elemente im DOM auszuwählen, aber diese Methoden werden häufig verwendet und sind eine gute Grundlage für den Anfang.

Das DOM mit JavaScript verändern

Jetzt, wo wir verschiedene Methoden kennen, um ein bestimmtes Element aus unserem HTML-Code zu holen, sehen wir uns an, wie sich das DOM verändern lässt: Inhalt hinzufügen, Text ändern, CSS setzen.

HTML mit JavaScript hinzufügen

Über die Eigenschaft innerHTML fügst du einem DOM-Element HTML hinzu. Zum Beispiel, um am Ende der Liste einen Eintrag anzuhängen:

const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';

Ein neues Element mit JavaScript hinzufügen

Du kannst auch ein neues Element erzeugen und es mit der Methode appendChild an ein DOM-Element hängen. Zum Beispiel, um am Ende der Liste einen Eintrag anzuhängen:

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);

Den Text eines Elements mit JavaScript ändern

Den Text eines Elements änderst du über die Eigenschaft textContent. Zum Beispiel, um den Text der Überschrift zu ändern:

const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';

CSS auf ein Element in JavaScript anwenden

Über die Eigenschaft style bringst du CSS auf ein DOM-Element. Zum Beispiel, um den Absatz rot und fett zu machen:

const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';

Du kannst CSS auch mit der Methode setAttribute setzen. Zum Beispiel:

const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');

Fazit

Es gibt viele weitere Wege, das CSS eines DOM-Elements in JavaScript zu verändern, aber diese Methoden werden häufig verwendet und sind eine gute Grundlage für den Anfang.

Neben dem CSS lassen sich auch andere Seiten eines DOM-Elements bearbeiten, etwa sein HTML- oder Textinhalt, und du kannst ihm Ereignisse mitgeben: ein Klick, das Überfahren mit der Maus und so weiter.

Im nächsten Kapitel sehen wir uns die Ereignisse in JavaScript an und wie man mit ihnen arbeitet.