Das DOM in JavaScript: querySelector, textContent

Problem

Der Preis bleibt „—“

Preis und Lagerbestand des Produkts kommen aus JavaScript. Ein Kollege hat das Skript ganz nach oben gesetzt, „damit es früher startet“. Die Seite zeigt „—“ statt eines Preises.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Dobrudzha-Brot</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="script.js"></script>
    <article>
      <h1>Dobrudzha-Brot</h1>
      <p>Preis: <strong id="price">—</strong></p>
      <p id="stock">—</p>
      <button type="button">In den Warenkorb</button>
    </article>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 8px 16px; }

const price = document.querySelector('#price');
console.log(price);
price.textContent = '1,80 €';
document.querySelector('#stock').textContent = 'Auf Lager: 12 Stk.';

Die Konsole sagt zwei Dinge. console.log(price) hat null ausgegeben, und die nächste Zeile scheitert mit TypeError: Cannot set properties of null. Das Element <strong id="price"> steht doch im HTML. Warum findet JavaScript es nicht?

Die Idee

Das Dokument als Objekt

Im HTML-Modul hast du gesehen, dass der Browser aus dem Text einen Baum baut. JavaScript arbeitet mit demselben Baum: Für JavaScript ist die Seite ein Objekt namens document. Jedes Element im Baum ist ein Objekt mit Feldern und Methoden. Deshalb heißt der Baum DOM: Document Object Model.

Ein Element findest du mit einem Selektor, genau wie in CSS:

const price = document.querySelector('#price');   // nach id
const title = document.querySelector('h1');       // nach Tag
const first = document.querySelector('.product'); // nach Klasse: das erste
const links = document.querySelectorAll('nav a'); // alle Links in nav

querySelector geht den Baum von oben nach unten durch und gibt das erste passende Element zurück. Gibt es keins, kommt null.
querySelectorAll gibt alle als NodeList zurück: eine Liste mit length und forEach, aber ohne map und filter. Dafür wandelst du sie in ein Array um: [...links]. Arrays und forEach stammen aus dem JavaScript-Kurs: Arrays und Lambdas.
Die NodeList ist eine Momentaufnahme: Ein Element, das später dazukommt, ist nicht darin.

null heißt „so ein Element gibt es nicht“, nicht „ein leeres Element“. Der Fehler kommt erst danach: null hat kein textContent, und der Code scheitert in der nächsten Zeile.

Die Idee

Wann das Skript läuft

Der Parser liest das HTML von oben nach unten. Sobald er <script> erreicht, hält er an, führt das Skript aus und macht erst dann weiter. Im Problem steht das Skript vor <article>. Wenn es läuft, besteht der Baum nur aus <body>, und der Preis ist noch nicht da. Deshalb gibt querySelector null zurück.

Die Lösung: Das Skript wartet auf den Baum.

<head>
  <meta charset="utf-8">
  <script src="script.js" defer></script>
</head>

defer sagt: Lade das Skript sofort herunter, führe es aber erst aus, wenn das ganze HTML gelesen ist. Dann ist jedes Element im Baum.
Der ältere Weg ist ein <script> ganz unten, direkt vor </body>. Er funktioniert aus demselben Grund.
defer wirkt nur bei einem Skript mit src. Bei einem Skript mit Code zwischen den Tags bewirkt es nichts.

Probier es aus

Den Preis reparieren

Repariere die Seite so, dass sie den Preis und den Lagerbestand zeigt. Fass script.js nicht an: Das Problem ist der Zeitpunkt, zu dem es läuft, nicht das, was es tut.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Dobrudzha-Brot</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="script.js"></script>
    <article>
      <h1>Dobrudzha-Brot</h1>
      <p>Preis: <strong id="price">—</strong></p>
      <p id="stock">—</p>
      <button type="button">In den Warenkorb</button>
    </article>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 8px 16px; }

const price = document.querySelector('#price');
console.log(price);
price.textContent = '1,80 €';
document.querySelector('#stock').textContent = 'Auf Lager: 12 Stk.';

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Dobrudzha-Brot</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <article>
      <h1>Dobrudzha-Brot</h1>
      <p>Preis: <strong id="price">—</strong></p>
      <p id="stock">—</p>
      <button type="button">In den Warenkorb</button>
    </article>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 8px 16px; }

script.js

const price = document.querySelector('#price');
console.log(price);
price.textContent = '1,80 €';
document.querySelector('#stock').textContent = 'Auf Lager: 12 Stk.';

Die Idee

Der Text: textContent und innerHTML

Das gefundene Element änderst du über seine Felder. Für Text gibt es zwei:

price.textContent = '1,80 €';                    // der Text, wie er ist
note.innerHTML = 'Preis: <strong>1,80 €</strong>'; // der Text wird als HTML gelesen

textContent setzt Text ein. Steht darin <strong>, erscheint das als Zeichen, nicht als Tag.
innerHTML übergibt den Text an den Parser, der daraus neue Elemente baut. Die alten Kinder des Elements sind danach weg.

innerHTML mit Daten von einem Nutzer (ein Name, eine Bewertung, eine Suche) ist gefährlich. Steckt darin HTML mit Code, läuft dieser Code im Browser von jedem, der die Seite öffnet: Das ist ein XSS-Angriff, um den es in der Lektion „Nicht vertrauenswürdige Eingaben“ geht. Deshalb kommt Text mit textContent hinein, und neue Elemente entstehen mit createElement (unten).

Nach der Änderung zeichnet der Browser von selbst neu. Nicht die ganze Seite, nur das, was sich geändert hat.

Sieh es dir an

So verändert sich die Seite

Links ist der Baum, rechts die Seite, die der Browser daraus zeichnet. Der Code findet den Warenkorb, ändert seinen Text und seine Klasse und hängt eine neue Zeile an die Liste.

const cart = document.querySelector('#cart');
cart.textContent = 'Warenkorb: 1';
cart.classList.add('full');
const li = document.createElement('li');
li.textContent = 'Milch';
document.querySelector('ul').append(li);

Schritt für Schritt, in Worten

Der Parser hat den Baum aus dem HTML schon gebaut. Rechts ist die Seite, die der Browser daraus zeichnet. JavaScript sieht über document denselben Baum.
querySelector('#cart') geht den Baum von oben durch und vergleicht jedes Element mit dem Selektor. Es gibt das erste passende zurück: cart zeigt jetzt auf diesen Knoten. Gibt es keins, kommt null.
textContent ersetzt den Text des Knotens. Der Browser bemerkt die Änderung und zeichnet nur diesen Teil der Seite neu. Der Rest bleibt, wie er war.
classList.add gibt dem Element eine Klasse. Eine CSS-Regel für .full gibt ihm eine neue Farbe, und wieder wird nur der Warenkorb neu gezeichnet.
createElement macht ein neues <li>, und textContent gibt ihm Text. Es ist noch nicht im Baum, deshalb ändert sich die Seite nicht.
append setzt es als letztes Kind von <ul> ein. Jetzt ist es im Baum, und die Liste auf der Seite wächst um eine Zeile.
JavaScript zeichnet die Seite nie selbst. Es ändert den Baum, und der Browser zeichnet, was sich geändert hat. Die Seite wird nicht neu geladen.

JavaScript zeichnet nichts selbst. Es ändert den Baum, und der Browser zeichnet die Änderung. Die Seite wird nicht neu geladen, deshalb bleiben der Text in den Feldern und die Scrollposition erhalten.

Probier es aus

Nur noch 3 Stück

Zeige den Bestand in #stock an: „Nur noch 3 Stk.“. Bei weniger als 5 bekommt das Element die Klasse low (das CSS färbt sie rot). Der fette Text aus der Klasse stock muss bleiben.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Frische Milch 3 %</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <article>
      <h1>Frische Milch 3 %</h1>
      <p id="stock" class="stock">—</p>
    </article>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
.stock { font-weight: bold; }
.low { color: #c2452a; }

const stock = 3;
const text = document.querySelector('#stock');
// Zeig „Nur noch 3 Stk.“ an und setz die Klasse low, wenn es weniger als 5 sind.

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Frische Milch 3 %</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <article>
      <h1>Frische Milch 3 %</h1>
      <p id="stock" class="stock">—</p>
    </article>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; padding: 16px; }
.stock { font-weight: bold; }
.low { color: #c2452a; }

script.js

const stock = 3;
const text = document.querySelector('#stock');
text.textContent = `Nur noch ${stock} Stk.`;
if (stock < 5) {
  text.classList.add('low');
}

Die Idee

Attribute, Properties und Klassen

In HTML hat ein Element Attribute: value="1", disabled, data-id="7". In JavaScript hat es Properties: Felder des Objekts. Die meisten Attribute haben eine Property mit demselben Namen, aber beide sind nicht dasselbe.

input.value ist das, was jetzt im Feld steht. Das Attribut value ist der Startwert und ändert sich nicht, während die Käuferin tippt. Das Attribut liest du mit getAttribute('value').
button.disabled = true schaltet den Button aus. Die Property ist true oder false.
data-…-Attribute sind für deine eigenen Daten. Du liest sie über dataset: data-stock ist dataset.stock, und data-product-id ist dataset.productId. Der Wert ist immer ein String.
Mit Klassen arbeitest du über classList: add, remove, toggle (fügt die Klasse hinzu, wenn sie fehlt, und entfernt sie, wenn sie da ist) und contains.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Vitosha-Käse</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <article data-id="7" data-stock="12">
      <h1>Vitosha-Käse</h1>
      <label>Menge <input id="qty" type="number" value="1" min="1"></label>
      <button type="button" id="add">In den Warenkorb</button>
    </article>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
input { width: 4em; font-size: 16px; }
button { font-size: 16px; padding: 8px 16px; margin-left: 8px; }

const qty = document.querySelector('#qty');
qty.value = '3';
console.log('Eigenschaft value:', qty.value);
console.log('Attribut value:', qty.getAttribute('value'));

const card = document.querySelector('article');
console.log('data-stock:', card.dataset.stock, typeof card.dataset.stock);

const add = document.querySelector('#add');
add.disabled = true;

Die Konsole zeigt, dass die Property 3 ist, während das Attribut noch 1 ist. dataset.stock ist "12", ein String: Wandle ihn mit Number(...) in eine Zahl um, bevor du damit rechnest.

Probier es aus

Finde den Fehler

Der Sale soll jeden Preis rot färben, aber die Konsole meldet Cannot read properties of undefined (reading 'add').

Wähle die Zeile mit dem Fehler.

Die Idee

Neue Elemente

Ein neues Element machst du in drei Schritten: erzeugen, mit Inhalt füllen und in den Baum setzen.

const li = document.createElement('li');   // ein neues <li>, noch nicht auf der Seite
li.textContent = 'Milch';
li.dataset.id = '2';
document.querySelector('ul').append(li);    // jetzt ist es das letzte Kind von <ul>

Solange du es nicht mit append einsetzt, ist das Element nicht auf der Seite. append nimmt auch mehrere Elemente auf einmal: li.append(title, button). prepend setzt es an den Anfang, und remove() nimmt das Element aus dem Baum.

Genauer, für Neugierige

Weitere Suchwege. getElementById('price') entspricht querySelector('#price'). getElementsByClassName und getElementsByTagName geben eine „lebende“ Liste zurück: Sie ändert sich, wenn sich der Baum ändert. querySelectorAll gibt eine Momentaufnahme zurück. Nach einem append eines neuen .price hat die lebende Liste ein Element mehr, die Momentaufnahme nicht.

Suchen innerhalb eines Elements. Jedes Element hat querySelector, nicht nur document: card.querySelector('.price') sucht nur innerhalb der Karte.

setAttribute('disabled', 'false') schaltet den Button aus. Bei disabled zählt nur, ob das Attribut da ist, nicht sein Wert. Schreib also button.disabled = false oder removeAttribute('disabled').

innerHTML und <script>. Ein Skript, das du mit innerHTML einsetzt, läuft nicht. Ein Attribut wie onerror an einem Bild dagegen schon. Deshalb ist innerHTML mit fremden Daten auch ohne <script> gefährlich.

className und classList. className ist das ganze Attribut class als ein String. Wer ihm etwas zuweist, ersetzt alle Klassen auf einmal.

Übung

Die Produktkarte

In script.js gibt es ein Objekt product. Fülle die Karte damit: Der Name ist die Überschrift (#name), der Preis ist „8,90 €“ (zwei Nachkommastellen, mit Komma), und der Bestand ist „Ausverkauft“, wenn stock 0 ist. Dann bekommt die Karte die Klasse sold-out, und der Button wird ausgeschaltet. Setze auf die Karte ein data-id mit der id des Produkts. Füge für jedes Label in badges ein <li> in #badges ein.

HTML, CSS, JS

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Vitosha-Käse</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <article class="product">
      <h2 id="name"></h2>
      <p id="price"></p>
      <p id="stock"></p>
      <ul id="badges" aria-label="Etiketten"></ul>
      <button type="button" id="add">In den Warenkorb</button>
    </article>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
.product { border: 1px solid #ccc; border-radius: 8px; padding: 12px 16px; max-width: 320px; }
.sold-out { opacity: 0.6; }
#badges { list-style: none; padding: 0; display: flex; gap: 8px; }
#badges li { background: #f3efe6; border-radius: 4px; padding: 2px 8px; }
button { font-size: 16px; padding: 8px 16px; }

const product = {
  id: 7,
  name: 'Vitosha-Käse',
  price: 8.9,
  stock: 0,
  badges: ['neu', 'bulgarisch'],
};

Lösung

index.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Vitosha-Käse</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
  </head>
  <body>
    <article class="product">
      <h2 id="name"></h2>
      <p id="price"></p>
      <p id="stock"></p>
      <ul id="badges" aria-label="Etiketten"></ul>
      <button type="button" id="add">In den Warenkorb</button>
    </article>
  </body>
</html>

style.css

body { font-family: system-ui, sans-serif; padding: 16px; }
.product { border: 1px solid #ccc; border-radius: 8px; padding: 12px 16px; max-width: 320px; }
.sold-out { opacity: 0.6; }
#badges { list-style: none; padding: 0; display: flex; gap: 8px; }
#badges li { background: #f3efe6; border-radius: 4px; padding: 2px 8px; }
button { font-size: 16px; padding: 8px 16px; }

script.js

const product = {
  id: 7,
  name: 'Vitosha-Käse',
  price: 8.9,
  stock: 0,
  badges: ['neu', 'bulgarisch'],
};

const card = document.querySelector('.product');
card.dataset.id = product.id;
document.querySelector('#name').textContent = product.name;
document.querySelector('#price').textContent = `${product.price.toFixed(2).replace('.', ',')} €`;

const stock = document.querySelector('#stock');
const add = document.querySelector('#add');
if (product.stock === 0) {
  stock.textContent = 'Ausverkauft';
  card.classList.add('sold-out');
  add.disabled = true;
} else {
  stock.textContent = `Auf Lager: ${product.stock} Stk.`;
}

const badges = document.querySelector('#badges');
product.badges.forEach((badge) => {
  const li = document.createElement('li');
  li.textContent = badge;
  badges.append(li);
});

Test

Teste dich

1. Was gibt document.querySelector('#total') zurück, wenn es auf der Seite kein Element mit id="total" gibt?Es wirft einen FehlernullEin leeres Element

querySelector wirft keinen Fehler, es gibt null zurück. Der Fehler kommt in der nächsten Zeile, wenn der Code null.textContent anfasst.

2. Das Skript steht in <head> ohne defer und sucht einen Button im <body>. Was findet es?Den Button, aber nur, wenn die Seite kurz istDen Button: Der Browser liest erst das ganze HTML und führt die Skripte danach ausNichts (null): Der Browser führt das Skript aus, sobald der Parser es erreicht, und der Button ist noch nicht im Baum

Der Parser hält bei <script> an, führt es aus und macht erst dann weiter. Mit defer wartet das Skript, bis der Baum fertig ist.

3. Der Name eines Produkts kommt von einem Nutzer. Wie bringst du ihn auf die Seite?Beides gehtinnerHTMLtextContent

textContent zeigt den Text, wie er ist, auch mit einem < darin. innerHTML liest ihn als HTML, und dieses HTML kann Code enthalten, der im Browser jedes Käufers läuft.

4. Die Käuferin hat 3 in <input value="1"> getippt. Was liefern input.value und input.getAttribute('value')?"3" und "1"3 und 1 (Zahlen)"3" und "3"

Das Attribut ist der Startwert aus dem HTML und ändert sich nicht. Die Property value ist das, was jetzt im Feld steht. Beide sind Strings.

5. Welche Zeile gibt jedem .price-Element die Klasse sale?document.querySelectorAll('.price').classList.add('sale')document.querySelector('.price').classList.add('sale')document.querySelectorAll('.price').forEach((p) => p.classList.add('sale'))

querySelectorAll gibt eine Liste zurück (eine NodeList), und eine Liste hat kein classList. Die Klasse kommt einzeln auf jedes Element. querySelector findet nur das erste.

Das DOM: die Seite aus JavaScript

Cookies