Durch den Baum laufen

<div class="liste">
  <article id="karte-1"><h2>Erster Kurs</h2><button>Mehr</button></article>
  <article id="karte-2"><h2>Zweiter Kurs</h2><button>Mehr</button></article>
  <article id="karte-3"><h2>Dritter Kurs</h2><button>Mehr</button></article>
</div>

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;
}

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

button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #fafaf9;
  cursor: pointer;
}

const zweite = document.querySelector("#karte-2");

// Nach oben.
console.log("Eltern:", zweite.parentElement.className);

// Nach unten.
console.log("Kinder:", zweite.children.length);
console.log("erstes Kind:", zweite.firstElementChild.tagName);
console.log("letztes Kind:", zweite.lastElementChild.tagName);

// Zur Seite.
console.log("davor:", zweite.previousElementSibling.id);
console.log("danach:", zweite.nextElementSibling.id);

// Am Rand gibt es keinen Nachbarn. Dann kommt null.
const erste = document.querySelector("#karte-1");
console.log("vor der ersten:", erste.previousElementSibling);

<div class="liste">
  <article>Erster</article>
  <article>Zweiter</article>
</div>

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

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

// Mit Element im Namen: nur Elemente.
console.log("children:", liste.children.length);
console.log("firstElementChild:", liste.firstElementChild.tagName);

// Ohne Element im Namen: auch Textknoten. Und zwischen
// den Tags im Markup steht ein Zeilenumbruch mit Einzug,
// also ein Textknoten.
console.log("childNodes:", liste.childNodes.length);
console.log("firstChild:", liste.firstChild.nodeName);

// Deshalb ist firstChild fast nie das, was man meint.
// JSON.stringify setzt den Text in Anführungszeichen und schreibt
// den Umbruch als \n, sonst sähe der Leerraum in der Console
// wie nichts aus. Was JSON sonst ist, kommt in Abschnitt 16.
console.log("firstChild Inhalt:", JSON.stringify(liste.firstChild.textContent));

// Und ohne Leerraum im Markup wäre es plötzlich richtig,
// was die Sache noch verwirrender macht.
const eng = document.createElement("div");
eng.innerHTML = "<b>a</b><i>b</i>";
console.log("ohne Leerraum:", eng.firstChild.nodeName);

<div class="liste">
  <article id="karte-2" class="karte">
    <h2>Zweiter Kurs</h2>
    <p>Ein Absatz <button>Mehr</button></p>
  </article>
</div>

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;
}

p {
  margin: 0 0 0.75rem;
}

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

button {
  padding: 0.4rem 0.8rem;
  border: 1px solid #d6d3d1;
  border-radius: 6px;
  background: #fafaf9;
  cursor: pointer;
}

const knopf = document.querySelector("button");

// Von Hand hangeln, wenn man die Struktur genau kennt.
console.log("von Hand:", knopf.parentElement.parentElement.id);

// Mit closest, wenn man sie nicht genau kennt. Es sucht vom
// Element aus nach oben den nächsten passenden Vorfahren.
console.log("mit closest:", knopf.closest(".karte").id);

// Das Element selbst zählt mit. closest fängt bei ihm an.
console.log("bei sich selbst:", knopf.closest("button").tagName);

// Kein passender Vorfahre heißt null.
console.log("nichts gefunden:", knopf.closest(".gibtesnicht"));

// Und von der Karte aus wieder nach unten suchen.
const karte = knopf.closest(".karte");
console.log("Überschrift dazu:", karte.querySelector("h2").textContent);

<div class="karte hervor" data-kurs="js"><h2>Zweiter Kurs</h2></div>
<div class="karte"><h2>Dritter Kurs</h2></div>

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 erste = document.querySelector(".karte");

// matches prüft, ob ein Element zu einem Selektor passt.
console.log("hervor:", erste.matches(".hervor"));
console.log("mit Attribut:", erste.matches("[data-kurs]"));
console.log("nicht:", erste.matches(".gibtesnicht"));

// Damit lässt sich eine NodeList filtern, ohne den
// Selektor zweimal zu schreiben.
const alle = Array.from(document.querySelectorAll(".karte"));
const hervorgehoben = alle.filter((karte) => karte.matches(".hervor"));
console.log("gefiltert:", hervorgehoben.length);

// classList.contains kann fast dasselbe, aber nur für Klassen.
console.log("classList:", erste.classList.contains("hervor"));

// matches versteht dagegen jeden Selektor.
console.log("zusammengesetzt:", erste.matches(".karte[data-kurs='js']"));