Inhalte und Attribute lesen

<div id="box">
  Ein Satz mit <strong>Betonung</strong> darin.
  <span hidden>Versteckt</span>
</div>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

const box = document.getElementById("box");

// textContent: der reine Text aller Nachfahren, auch der
// versteckten, mit dem Leerraum aus dem Markup. JSON.stringify
// macht den Leerraum sichtbar, wie in Lektion 10.3.
console.log("textContent:", JSON.stringify(box.textContent));

// innerHTML: das Markup darin, als Text.
console.log("innerHTML:", JSON.stringify(box.innerHTML));

// innerText: was sichtbar ist. Das Versteckte fehlt, und
// der Leerraum ist zusammengefasst.
console.log("innerText:", JSON.stringify(box.innerText));

// Beim Lesen ist textContent die Wahl: es ist berechenbar
// und braucht kein Layout.
const betonung = document.querySelector("strong");
console.log("nur die Betonung:", betonung.textContent);

<a id="link" href="/lernen/javascript" class="knopf">Zum Kurs</a>
<input id="feld" value="Anfangswert">

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea {
  padding: 0.35rem 0.5rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
}

const link = document.getElementById("link");

// getAttribute liefert, was wörtlich im Markup steht.
console.log("Attribut:", link.getAttribute("href"));

// Die Eigenschaft liefert die aufgelöste Adresse. Wie sie
// aussieht, hängt davon ab, unter welcher Adresse die Seite
// läuft, deshalb steht sie in keiner Prüfung dieses Kurses.
console.log("Eigenschaft:", link.href);

// Bei class heißt die Eigenschaft anders als das Attribut,
// weil class in JavaScript ein reserviertes Wort ist.
console.log("Attribut class:", link.getAttribute("class"));
console.log("Eigenschaft className:", link.className);

// Und bei einem Eingabefeld laufen die beiden auseinander,
// sobald jemand tippt: das Attribut bleibt der Anfangswert,
// die Eigenschaft ist der aktuelle. Abschnitt 13 baut darauf auf.
const feld = document.getElementById("feld");
console.log("Attribut value:", feld.getAttribute("value"));
console.log("Eigenschaft value:", feld.value);

<article class="karte hervor" data-kurs-id="js" data-preis-cent="4900" data-frei="false">
  <h2>JavaScript</h2>
</article>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

h2 {
  font-size: 1.2rem;
  margin: 1.25rem 0 0.5rem;
}

const karte = document.querySelector(".karte");

// Alles, was mit data- beginnt, landet in dataset.
console.log("dataset:", JSON.stringify({ ...karte.dataset }));

// Aus data-kurs-id wird kursId: die Bindestriche fallen weg,
// der nächste Buchstabe wird groß.
console.log("kursId:", karte.dataset.kursId);
console.log("preisCent:", karte.dataset.preisCent);

// Es ist immer Text. Auch wenn eine Zahl darin steht.
console.log("Typ:", typeof karte.dataset.preisCent);
console.log("gerechnet:", Number(karte.dataset.preisCent) / 100);

// Und auch ein false ist nur der Text "false", also
// wahr genug im Sinn von Lektion 3.3.
console.log("als Text:", karte.dataset.frei);
console.log("richtig geprüft:", karte.dataset.frei === "true");

<article class="karte hervor gross"><h2>JavaScript</h2></article>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

h2 {
  font-size: 1.2rem;
  margin: 1.25rem 0 0.5rem;
}

const karte = document.querySelector(".karte");

// classList.contains fragt nach genau einer Klasse.
console.log("hervor:", karte.classList.contains("hervor"));
console.log("klein:", karte.classList.contains("klein"));

// classList ist außerdem eine Liste.
console.log("Anzahl:", karte.classList.length);
console.log("alle:", [...karte.classList]);

// className ist dagegen der ganze Text am Stück, und
// deshalb der falsche Weg für die Frage nach einer Klasse.
console.log("className:", karte.className);
console.log("naiv geprüft:", karte.className.includes("gross"));

// Das sieht richtig aus und trifft auch bei einer Klasse
// namens grossartig. Deshalb classList.contains.