Elemente auswählen und bearbeiten

Nachdem wir verstanden haben, was das DOM ist, lernen wir nun, wie wir einzelne Elemente im DOM auswählen und bearbeiten können. Diese Fähigkeit ist grundlegend für jede Art von JavaScript-Interaktion auf Webseiten.

Elemente im DOM auswählen

Es gibt verschiedene Methoden, um Elemente im DOM zu finden. Jede hat ihre eigenen Vor- und Nachteile und eignet sich für unterschiedliche Situationen.

Auswahl nach ID

Die schnellste Methode, um ein einzelnes Element zu finden, ist über seine ID. Da IDs eindeutig sein sollten, liefert diese Methode immer nur ein Element zurück.

// HTML: <div id="hauptContainer">Inhalt</div>
let container = document.getElementById("hauptContainer");

Auswahl nach Klasse

Um alle Elemente mit einer bestimmten Klasse zu finden, nutzen Sie getElementsByClassName. Diese Methode gibt eine HTMLCollection zurück (ähnlich einem Array).

// HTML: <p class="highlight">Text 1</p> <p class="highlight">Text 2</p>
let highlightedElements = document.getElementsByClassName("highlight");

// Durch die Elemente iterieren
for (let i = 0; i < highlightedElements.length; i++) {
  console.log(highlightedElements[i].textContent);
}

Auswahl nach Tag-Namen

Um alle Elemente eines bestimmten Typs zu finden, verwenden Sie getElementsByTagName.

// Alle Absätze auswählen
let paragraphs = document.getElementsByTagName("p");

// Alle Bilder auswählen
let images = document.getElementsByTagName("img");

Auswahl mit CSS-Selektoren

Die vielseitigsten Methoden sind querySelector und querySelectorAll. Mit ihnen können Sie CSS-Selektoren verwenden, um Elemente auszuwählen.

// Das erste Element mit der Klasse "highlight"
let firstHighlight = document.querySelector(".highlight");

// Alle Elemente mit der Klasse "highlight"
let allHighlights = document.querySelectorAll(".highlight");

// Das erste Bild innerhalb eines Artikels
let imageInArticle = document.querySelector("article img");

// Alle Links in der Navigation
let navLinks = document.querySelectorAll("nav a");

// Element mit einer bestimmten ID
let header = document.querySelector("#header");

// Kombinierte Selektoren
let specialItems = document.querySelectorAll("ul.special-list li:not(.excluded)");

Mit querySelector bekommen Sie immer nur das erste passende Element, während querySelectorAll alle passenden Elemente in einer NodeList zurückgibt.

Unterschied zwischen HTMLCollection und NodeList

Die verschiedenen Auswahlmethoden geben unterschiedliche Typen von Sammlungen zurück:

• HTMLCollection (von getElementsBy...): Live-Sammlung, die sich automatisch aktualisiert, wenn sich das DOM ändert
• NodeList (von querySelectorAll): Statische Sammlung, die sich nicht automatisch aktualisiert

Elemente innerhalb anderer Elemente finden

Sie können die Suche auf einen Teilbereich des DOM beschränken, indem Sie die Auswahlmethoden auf einem Element statt auf document aufrufen:

// Erst die Fusszeile finden
let footer = document.querySelector("footer");

// Dann nur Links innerhalb der Fusszeile auswählen
let footerLinks = footer.querySelectorAll("a");

Durch Elementsammlungen iterieren

Nachdem Sie eine Sammlung von Elementen erhalten haben, müssen Sie häufig durch diese iterieren, um mit jedem Element zu arbeiten.

Mit for-Schleife

let items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  console.log(items[i].textContent);
}

Mit for…of-Schleife (moderner)

let items = document.querySelectorAll(".item");

for (let item of items) {
  console.log(item.textContent);
}

Mit forEach (nur für NodeList)

let items = document.querySelectorAll(".item"); // NodeList

items.forEach(item => {
  console.log(item.textContent);
});

Beachten Sie, dass forEach nur für NodeList verfügbar ist, nicht für HTMLCollection. Bei Bedarf können Sie eine HTMLCollection in ein Array umwandeln:

let elements = document.getElementsByClassName("item"); // HTMLCollection
let elementsArray = Array.from(elements);

elementsArray.forEach(element => {
  console.log(element.textContent);
});

Wichtige Eigenschaften von DOM-Elementen

Nachdem Sie ein Element ausgewählt haben, können Sie auf verschiedene Eigenschaften zugreifen und diese verändern.

Textinhalt

// Textinhalt lesen
let message = document.getElementById("nachricht").textContent;

// Textinhalt setzen
document.getElementById("nachricht").textContent = "Neuer Text";

HTML-Inhalt

// HTML-Inhalt lesen
let content = document.getElementById("inhalt").innerHTML;

// HTML-Inhalt setzen (vorsichtig verwenden wegen Cross-Site-Scripting-Risiken)
document.getElementById("inhalt").innerHTML = "<strong>Wichtige Nachricht</strong>";

Attribute

// Attributwerte lesen
let imageUrl = document.getElementById("hauptBild").src;
let linkTarget = document.getElementById("meinLink").href;
let inputType = document.getElementById("suchfeld").type;

// Attribute setzen
document.getElementById("hauptBild").src = "neue-bild.jpg";
document.getElementById("meinLink").href = "https://www.beispiel.com";
document.getElementById("suchfeld").placeholder = "Suchen...";

Klassenlisten und -manipulation

Die classList-Eigenschaft bietet Methoden zum Arbeiten mit Klassen:

let element = document.getElementById("meinElement");

// Klassen hinzufügen
element.classList.add("highlight");

// Klassen entfernen
element.classList.remove("versteckt");

// Klasse umschalten (hinzufügen, wenn nicht vorhanden, entfernen, wenn vorhanden)
element.classList.toggle("erweitert");

// Prüfen, ob eine Klasse vorhanden ist
if (element.classList.contains("aktiv")) {
  console.log("Element ist aktiv");
}

// Mehrere Klassen hinzufügen oder entfernen
element.classList.add("gross", "wichtig", "hervorgehoben");
element.classList.remove("klein", "nebensächlich");

Inline-Stile

let box = document.querySelector(".box");

// Einzelne Stileigenschaften setzen
box.style.backgroundColor = "lightblue";
box.style.width = "200px";
box.style.padding = "10px";
box.style.borderRadius = "5px";

// Alle Inline-Stile auf einmal setzen (überschreibt vorhandene)
box.style.cssText = "background-color: lightblue; width: 200px; padding: 10px;";

// Zugriff auf den berechneten Stil (nur lesen)
let computedStyle = window.getComputedStyle(box);
console.log("Tatsächliche Breite:", computedStyle.width);

Beachten Sie, dass CSS-Eigenschaften mit Bindestrichen in JavaScript in camelCase geschrieben werden (background-color wird zu backgroundColor).

Element-Eigenschaften und -Dimensionen

Position und Grösse auslesen

let element = document.getElementById("meinElement");
let rect = element.getBoundingClientRect();

console.log("Position vom Viewport-Rand:", rect.left, rect.top);
console.log("Elementgrösse:", rect.width, rect.height);

Fensterdimensionen

// Sichtbarer Bereich (Viewport)
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;

// Gesamte Dokumentgrösse (inkl. scrollbare Bereiche)
let documentWidth = document.documentElement.scrollWidth;
let documentHeight = document.documentElement.scrollHeight;

Scroll-Position

// Aktuelle Scroll-Position
let scrollX = window.scrollX || window.pageXOffset;
let scrollY = window.scrollY || window.pageYOffset;

// Zu einer bestimmten Position scrollen
window.scrollTo(0, 500); // 500px von oben

// Sanft scrollen (moderner Browser)
window.scrollTo({
  top: 500,
  behavior: "smooth"
});

// Zu einem Element scrollen
document.getElementById("zielElement").scrollIntoView({behavior: "smooth"});

Übung: Elemente auswählen und bearbeiten

Aufgabe: Elemente im DOM manipulieren

Erstellen Sie ein einfaches HTML-Dokument mit verschiedenen Elementen und üben Sie das Auswählen und Bearbeiten mit JavaScript. Hier ist eine Vorlage, die Sie verwenden können:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>DOM-Manipulation Übung</title>
  <style>
    body { font-family: Arial, sans-serif; line-height: 1.6; }
    .container { max-width: 800px; margin: 0 auto; padding: 20px; }
    .box { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 4px; }
    .highlight { background-color: #ffffcc; }
    .hidden { display: none; }
    button { padding: 8px 12px; background: #4285f4; color: white; border: none; border-radius: 4px; cursor: pointer; }
    button:hover { background: #3367d6; }
  </style>
</head>
<body>
  <div class="container">
    <h1 id="hauptTitel">DOM-Manipulation Übung</h1>

    <div class="box" id="box1">
      <h2>Element 1</h2>
      <p>Dies ist der Text im ersten Element.</p>
    </div>

    <div class="box" id="box2">
      <h2>Element 2</h2>
      <p>Dies ist ein <span class="highlight">hervorgehobener</span> Text im zweiten Element.</p>
    </div>

    <div class="box hidden" id="box3">
      <h2>Element 3</h2>
      <p>Dieses Element ist zunächst versteckt.</p>
    </div>

    <ul id="itemListe">
      <li class="item">Element 1</li>
      <li class="item">Element 2</li>
      <li class="item">Element 3</li>
    </ul>

    <button id="anzeigenButton">Verstecktes Element anzeigen</button>
    <button id="styleButton">Stil ändern</button>
    <button id="textButton">Text ändern</button>
    <button id="listeButton">Listenelement hinzufügen</button>
  </div>

  <script>
    // Fügen Sie hier Ihren JavaScript-Code ein

  </script>
</body>
</html>

Jetzt implementieren Sie die folgenden Aufgaben im <script>-Bereich:

1. Elemente auswählen:

   • Wählen Sie die Überschrift mit ID “hauptTitel” und ändern Sie ihren Text zu “DOM-Manipulation ist grossartig!”
   • Wählen Sie alle Elemente mit der Klasse “box” und speichern Sie sie in einer Variablen
   • Wählen Sie das erste Element mit der Klasse “highlight” und speichern Sie es in einer Variablen

2. Event-Handler für Buttons:

   • Fügen Sie dem Button “anzeigenButton” einen Klick-Handler hinzu, der das versteckte Element (box3) anzeigt
   • Fügen Sie dem Button “styleButton” einen Klick-Handler hinzu, der die Hintergrundfarbe aller Boxen zu “lightblue” ändert
   • Fügen Sie dem Button “textButton” einen Klick-Handler hinzu, der den Text in der ersten Box ändert
   • Fügen Sie dem Button “listeButton” einen Klick-Handler hinzu, der ein neues Element zur Liste hinzufügt

3. Klassen manipulieren:

   • Fügen Sie der ersten Box die Klasse “highlight” hinzu, wenn sie geklickt wird
   • Entfernen Sie die Klasse “highlight” von allen Elementen, wenn die Seite doppelgeklickt wird

4. Iteration über Elementsammlungen:

   • Durchlaufen Sie alle Listenelemente und fügen Sie ihnen ein “data-index”-Attribut hinzu, das ihre Position widerspiegelt

Speichern Sie die Datei und öffnen Sie sie in Ihrem Browser, um die DOM-Manipulation zu testen!

Zusammenfassung

Es gibt verschiedene Methoden zum Auswählen von DOM-Elementen:

• getElementById() für einzelne Elemente mit einer bestimmten ID
• getElementsByClassName() für Elemente mit einer bestimmten Klasse
• getElementsByTagName() für Elemente eines bestimmten Typs
• querySelector() und querySelectorAll() für flexible Auswahl mit CSS-Selektoren

Nach der Auswahl können Sie mit den Elementen arbeiten durch:

• Zugriff auf und Änderung von Textinhalten mit textContent oder innerHTML
• Manipulation von Attributen direkt oder mit getAttribute() und setAttribute()
• Verwaltung von Klassen mit classList-Methoden
• Änderung von Stilen über die style-Eigenschaft
• Um mit Elementsammlungen zu arbeiten, können Sie:
  • for-Schleifen
  • for...of-Schleifen
  • forEach-Methode (für NodeList oder nach Konvertierung in ein Array)

Die Fähigkeit, Elemente auszuwählen und zu bearbeiten, ist der Grundstein für interaktive Webseiten. Im nächsten Kapitel werden wir lernen, wie wir Inhalte und Styles gezielt ändern können, um noch mehr Dynamik zu ermöglichen.