Lädt...

Elemente auswählen

Ein Bäckerregal hält eine Überschrift und drei Zettel. Die Überschrift sagt Rye. Die Zettel nennen die Schicht: Morning, Noon und Evening. Der letzte Zettel trägt außerdem die Klasse sold. Das Regal ist ein main mit der id shelf. Darin steht ein h2 mit der id loaf, danach drei p-Elemente mit der Klasse tag. Auswählen heißt, das lebendige Dokument nach diesen Knoten unter einem Namen zu fragen, den du vorgibst. document.getElementById("loaf") liefert die Überschrift, und ihr Text ist Rye. document.getElementsByClassName("tag") liefert eine lebendige Liste der Länge 3. document.querySelector(".tag") liefert Morning, den ersten Zettel. document.querySelectorAll(".tag") liefert eine feste Liste, und Index 1 ist Noon. Ein Name, den das Regal nie schreibt, ist null von querySelector und eine Liste der Länge 0 von querySelectorAll.

Fünf Aufrufe, kein Gang den Baum hinunter

Die DOM-Seite nannte den Elternteil einer Überschrift und zählte Elementkinder gegen alle Knoten. Diese Seite liest weder parentElement noch nextElementSibling noch children, und sie ruft Math nicht auf. Der Baum steht schon. Hier unterscheidest du, welcher Aufruf einen Knoten liefert, welcher eine Liste liefert, und welches Ergebnis heißt, dass nichts gepasst hat.

Was jeder Aufruf zurückgibt

Zähle auf dem Regal, das nur die Überschrift und die drei Zettel enthält. Die Lesedatei weiter unten hängt einen weiteren Absatz an, deshalb ändert sich dort die Zahl der p-Elemente.

📊 Was jeder Aufruf zurückgibt

Aufruf Was zurückkommt Auf diesem Regal Leicht verwechselt
getElementById("loaf") ein Element oder null Überschrifttext Rye eine Liste, die du indizieren musst
getElementsByClassName("tag") lebendige HTMLCollection Länge 3 den Punkt schreiben, wie in .tag
getElementsByTagName("p") lebendige HTMLCollection Länge 3 die Überschrift, ein h2
querySelector(".tag") erster Treffer oder null der Zettel Morning jeder Zettel
querySelectorAll(".tag") statische NodeList Länge 3; Index 1 ist Noon eine lebendige Sammlung
querySelectorAll(".oven") leere NodeList Länge 0 null

Die Klassenmethode und ein CSS-Selektor schreiben den Punkt nicht gleich. getElementsByClassName("tag") will den nackten Namen tag. getElementsByClassName(".tag") sucht eine Klasse, die wörtlich .tag heißt, und liefert die Länge 0. querySelector will CSS, also bleibt der Punkt an .tag. querySelector("tag") sucht ein Element, dessen Tag-Name tag ist, findet keins und liefert null. Index 0 ist der erste Zettel. Index 1 ist Noon. Die Liste von getElementsByClassName ist lebendig: eine spätere Seite, die einen weiteren tag-Zettel anhängt, lässt die Länge wachsen. querySelectorAll behält die Länge vom Augenblick des Aufrufs. Evening trägt zwei Klassen, tag und sold, liegt also in der Liste der Länge 3 und ist zugleich der einzige Treffer für sold.

Eine id, ein Element

Eine id soll auf der Seite eindeutig sein. getElementById liefert dieses eine Element oder null, wenn die id fehlt. Es liefert keine Liste und existiert nur auf document, nicht auf einem Element.

Eine id

javascript 
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);

Die erste Zeile ist Rye. Die zweite ist false, weil die Überschrift im Regal steht. Teilen sich zwei Elemente die id loaf, liefert der Aufruf trotzdem nur das erste im Dokument.

Klassenname und Tag-Name

Beide Aufrufe liefern eine lebendige HTMLCollection. Lies length, bevor du einen einzelnen Zettel nimmst. Zähle am Regal mit vier Elementen, nicht in der Lesedatei.

Klasse und Tag

javascript 
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);

Die Zeilen sind 3, 3 und 1. Drei Zettel teilen tag. Alle drei sind p-Elemente, die Überschrift ist ein h2, also trifft die Tag-Zahl auf diesem Regal die Klassenzahl. Nur Evening hat sold. getElementsByClassName(".tag") ist ein anderer Aufruf: der Punkt gehört nicht zum Klassennamen, die Länge ist 0.

Der erste CSS-Treffer

querySelector liefert ein Element, das erste in Dokumentreihenfolge, oder null.

Erster Treffer

javascript 
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);

Die erste Zeile ist Morning. Die zweite ist Evening. #shelf .sold meint ein Element mit der Klasse sold im Regal, nicht das Regal selbst. document.getElementById("shelf").querySelector(".sold") beginnt am Regal und landet auf demselben Zettel Evening.

Jeder Treffer, dann ein Index

querySelectorAll liefert jeden Treffer in einer statischen NodeList. Die Liste darf leer sein. Sie ist nicht null.

Alle Treffer

javascript 
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);

Die Länge ist 3. Index 1 ist Noon. Index 0 ist Morning, Index 2 ist Evening. Diese Liste wächst nicht, wenn ein späteres Skript einen Zettel anhängt. Die HTMLCollection von getElementsByClassName("tag") würde wachsen. Eine ist eine Momentaufnahme, die andere bleibt lebendig.

Ein Name, den das Regal nie schrieb

Frage nach einer id und einer Klasse, die nicht in der Datei stehen.

Nichts gepasst

javascript 
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);

Die erste Zeile ist null. Die zweite ist null. Die dritte ist 0. querySelectorAll liefert auch dann eine Liste, wenn nichts passt. Du liest die Länge 0, und die Liste selbst ist nicht null. getElementById hat keine Liste, also ist ein Fehltreffer null, nicht 0.

Eine Zeile auf der Seite

Ein Absatz meldet, wie viele tag-Zettel es gibt, den ersten Zettel und den Zettel sold. Das Skript steht am Ende von body, nachdem die Elemente da sind. Die Zeile hat keine Klasse tag und gehört nicht zu den dreien.

Seitendemo — drei Zettel

html 
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>

Der Absatz zeigt 3 / Morning / Evening. In dieser Datei zählt getElementsByTagName("p") die Zahl 4, weil die Zeile ein weiteres p ist. querySelectorAll(".tag") zählt weiter 3. Die nächste Seite ändert das HTML der Elemente, die diese Aufrufe schon gefunden haben.

Das Regal prüfen

  1. Logge den Überschrifttext und erwarte Rye, dann die null-Prüfung und erwarte false
  2. Logge Klassenlänge, p-Länge und sold-Länge: 3, 3 und 1
  3. Logge den Text des ersten .tag und erwarte Morning, dann #shelf .sold und erwarte Evening
  4. Logge die Länge von querySelectorAll und erwarte 3, dann Index 1 und erwarte Noon
  5. Logge die fehlende id und das fehlende querySelector und erwarte beide Male null
  6. Logge querySelectorAll(".oven").length und erwarte 0
  7. Lies den Absatz und erwarte 3 / Morning / Evening

Falscher Aufruf

Die Seite bleibt offen. Der Aufruf, den du geschrieben hast, hat etwas anderes verlangt.

  • .tag an getElementsByClassName geben; der Punkt gehört nur in einen CSS-Selektor
  • tag ohne Punkt an querySelector geben und die Zettel erwarten
  • Index 1 als ersten Zettel lesen
  • Einen Fehltreffer von querySelectorAll als null nehmen statt als Länge 0
  • Einen Fehltreffer von getElementById als Liste der Länge 0 nehmen
  • getElementsByTagName("p") in der Lesedatei zählen und 3 erwarten
  • .map auf der HTMLCollection aufrufen; das ist kein Array
  • Auf dieser Seite parentElement lesen; das war die Baum-Seite

Das nimmst du mit

  • getElementById liefert ein Element oder null
  • getElementsByClassName und getElementsByTagName liefern eine lebendige HTMLCollection
  • Die Klassenmethode will tag, nicht .tag
  • querySelector liefert den ersten CSS-Treffer oder null
  • querySelectorAll liefert eine statische NodeList; ein Fehltreffer hat die Länge 0
  • Index 0 ist Morning und Index 1 ist Noon
  • Die nächste Seite ändert HTML an Elementen, die du schon ausgewählt hast

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 45 von 45
Javascript Tutorial