studyklar
IProg · Skript 2 · Abschnitt 3

Das DOM ändern: Knoten erzeugen, einhängen, entfernen

JavaScript kann den Baum einer Seite umbauen: neue Elemente und Texte erzeugen, sie an die richtige Stelle hängen, alte entfernen. Hier stehen die Funktionen dafür, je an einer kleinen Liste, und am Ende das Beispiel aus dem Skript. Rechts ändert sich der Baum mit. Mit Weiter geht es Schritt für Schritt voran.

Worum es geht

Skript 02 (JavaScript 1), Folien 10, 11 und 13: Erzeugen von Knoten, Manipulation des Dokumentbaums, Beispiel „Hinzufügen von Knoten“.

Bisher haben wir Knoten im DOM (Document Object Model, die Seite als Baum aus Knoten) gefunden und ihren Text geändert. Die Frage dieses Abschnitts: Wie kommen neue Knoten in den Baum, und wie verschwinden alte?

Aus Skript 02, Folien 8 und 9: getElementById holt ein Element über seine id, getElementsByTagName("li")[i] das li Nummer i (ab 0). firstChild ist das erste Kind eines Knotens.

So gehen wir vor:

  1. Knoten erzeugen: Element, Text, Attribut.
  2. Knoten einhängen, ersetzen, entfernen und kopieren.
  3. Das Beispiel von Folie 13: per Klick neue Absätze anhängen.
  4. Eine kurze Klausurfrage dazu.

createElement: ein neues Element

let neu = document.createElement("li");console.log(neu.nodeName);console.log(neu.parentNode);
LI
null

document.createElement("li") erzeugt einen neuen Elementknoten mit dem Tag li und gibt ihn zurück. Die Variable neu hält ihn.

Vorsicht (Folie 10): Der Knoten ist erzeugt, aber noch nicht im Dokument. Er hat keinen Elternknoten, darum ist parentNode gleich null (null heißt „kein Wert“). Auf der Seite sieht man nichts.

createTextNode: ein neuer Text

let text = document.createTextNode("Kiwi");console.log(text.nodeType);console.log(text.nodeValue);
3
Kiwi

Ein Element ohne Kind ist leer. Den Text dafür erzeugt document.createTextNode("Kiwi"): einen Textknoten mit dem Inhalt „Kiwi“. Sein nodeType ist 3, die Nummer für Textknoten.

Auch er ist nur erzeugt, nicht eingefügt. Element und Text sind zwei getrennte Knoten; erst ein späterer Schritt hängt den Text unter das Element.

Noch 12 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Abbildung 1Knoten erzeugen

Element, Text, Attribut

<ul id="liste"><li>Erdbeer</li><li>Schoko</li><li>Nuss</li></ul>
Legendegerade geändert oder gemeintDer Baum vor und nach der Änderung.