studyklar
IProg · Skript 2 · Abschnitt 2

Knoten im DOM finden: Zugriff und Navigation

Bevor JavaScript etwas an der Seite ändern kann, muss es das richtige Stück finden. Hier geht es um die zwei Wege dazu: direkt über eine Kennung oder Schritt für Schritt entlang des Baums. Rechts steht die Beispielseite als Code und als Baum. Mit Weiter geht es Schritt für Schritt voran.

Worum es geht

Skript 02 (JavaScript 1), Folien 7, 8, 9 und 12: Zugriff auf den Dokumentbaum, Navigation im Dokumentbaum, Analyse von Knoten.

Die Beispielseite verbindet den Absatz von Folie 7 mit einem kleinen Formular. Die Ausgaben von console.log erscheinen in der Konsole des Browsers (Taste F12).

Der Browser hält die Seite als Baum aus Knoten, das DOM (Document Object Model). Die Frage dieses Abschnitts: Wie kommt JavaScript an einen bestimmten Knoten heran?

Aus Skript 02, Folie 4: Jedes Tag wird ein Elementknoten, jeder Text ein Textknoten darunter. Auch Zeilenumbrüche und Leerzeichen zwischen den Tags werden Textknoten (Leerraum).

So gehen wir vor:

  1. Drei Zugriffsfunktionen: über id, über name, über den Tag-Namen.
  2. Navigation im Baum: Kinder, Eltern, Geschwister.
  3. Das Beispiel von Folie 7: Text ändern per Klick.
  4. Eine kurze Klausurfrage dazu.

getElementById: genau ein Element

console.log(document.getElementById("pid").nodeName);
P

Das Attribut id gibt einem Element eine Kennung. Eine id darf in einem Dokument nur einmal vorkommen. Darum liefert document.getElementById("pid") genau ein Element zurück: den Absatz.

nodeName ist der Name des Knotens, bei Elementen das Tag in Großbuchstaben (Folie 12). Die Ausgabe P bestätigt: Es ist der Absatz. Folie 8: Die id dient der eindeutigen Kennzeichnung eines Elements und wird für CSS (das Aussehen) und JavaScript benutzt.

getElementsByName: eine Liste

let sorten = document.getElementsByName("sorte");console.log(sorten.length);console.log(sorten[1].value);
3
Schoko

Das Attribut name ist bei Formularfeldern, Links und Bildern erlaubt. Anders als die id muss ein Name nicht eindeutig sein. Die drei Auswahlknöpfe heißen alle sorte; so weiß der Browser, dass man nur einen davon wählen kann.

Weil es mehrere Treffer geben kann, liefert getElementsByName (mit s in „Elements“) eine Liste. Das Skript nennt sie Array. Genau genommen ist es eine NodeList, eine Liste von Knoten; man benutzt sie aber wie ein Array: length ist die Anzahl, [i] das Element Nummer i, gezählt ab 0.

sorten[1] ist also der zweite Knopf. Sein Attribut value ist „Schoko“.

Noch 8 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 1Zugriff über Kennungen

id, name, Tag-Name

<body>  <p id="pid"     onclick="document.getElementById('pid').firstChild.nodeValue = 'Da ist es!'">Hier passiert was!</p>  <form id="f1">    <input type="radio" name="sorte" value="Erdbeer">    <input type="radio" name="sorte" value="Schoko">    <input type="radio" name="sorte" value="Nuss">  </form></body>
Die Beispielseite als Baum
  • body
  • ⏎␣␣ Leerraum
  • pid="pid"
  • „Hier passiert was!“
  • ⏎␣␣ Leerraum
  • formid="f1"
  • ⏎␣␣␣␣ Leerraum
  • inputname="sorte" value="Erdbeer"
  • ⏎␣␣␣␣ Leerraum
  • inputname="sorte" value="Schoko"
  • ⏎␣␣␣␣ Leerraum
  • inputname="sorte" value="Nuss"
  • ⏎␣␣ Leerraum
  • ⏎ Leerraum
D Dokumentknoten · E Elementknoten · T Textknoten · A Attributknoten · ⏎ Zeilenumbruch · ␣ Leerzeichen
Legendegerade gemeintDie Beispielseite: ein Absatz und ein Formular mit drei Auswahlknöpfen.