de:modul:m288:learningunits:lu08:03do_edit

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m288:learningunits:lu08:03do_edit [2025/12/03 00:28] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m288:learningunits:lu08:03do_edit [2025/12/05 01:29] (aktuell) – vdemir
Zeile 1: Zeile 1:
 +====== LU08c - DOM-Methoden ======
  
 +===== Lernziele =====
 +  - Verschiedene DOM-Selektor-Methoden unterscheiden können: Sie kennen Zweck, Einsatzgebiet und Unterschiede von getElementById(), getElementsByClassName(), getElementsByTagName() und querySelector().
 +  - HTML-Elemente gezielt auswählen und verändern können: Sie wenden jede Methode korrekt im Quellcode an, greifen auf einzelne Elemente oder Elementgruppen zu und manipulieren Inhalte oder Styles.
 +  - Situationsgerecht den passenden Selektor auswählen können: Sie entscheiden selbstständig, welche Methode für eine konkrete Aufgabenstellung am sinnvollsten ist – effizient, korrekt und verständlich.
 +
 +===== JavaScript DOM-Selektoren kompakte Übersicht =====
 +Die folgenden Methoden dienen dazu, HTML-Elemente im Dokument (DOM) zu finden und zu manipulieren. Jede Methode arbeitet etwas anders und eignet sich für unterschiedliche Zwecke. 
 +
 +----
 +
 +==== 1. document.getElementById() ====
 +
 +  * Findet genau ein Element anhand seiner ID.
 +  * IDs sind im Dokument eindeutig – ideal ein Element gezielt angesprochen werden soll.
 +
 +**Syntax**
 +
 +  document.getElementById("idName");
 +
 +**Codebeispiel**
 +
 +  <p id="titel">Hallo Welt</p>
 +  <script>
 +      document.getElementById("titel").innerHTML = "Text erfolgreich geändert!";
 +  </script>
 +
 +----
 +
 +==== 2. document.getElementsByClassName() ====
 +  * Liefert alle Elemente einer bestimmten CSS-Klasse als HTMLCollection (ähnlich wie ein Array).
 +  * Für einzelne Elemente muss man über den Index zugreifen:
 +
 +**Syntax**
 +
 +  document.getElementsByClassName("className")[index];
 +  
 +**Codebeispiel**
 +
 +  <p class="info">Erster Text</p>
 +  <p class="info">Zweiter Text</p>
 +  <script>
 +      document.getElementsByClassName("info")[0].innerHTML = "Ich bin geändert!";
 +      document.getElementsByClassName("info")[1].style.color = "red";
 +  </script>
 +
 +----
 +  
 +==== 3. document.getElementsByTagName() ====
 +
 +  * Gibt alle Elemente eines HTML-Tags zurück, ebenfalls als HTMLCollection.
 +  * Praktisch bei der Bearbeitung ganzer Elementgruppen (<p>, <li>, <button> …).
 +
 +**Syntax**
 +
 +  document.getElementsByTagName("tagName")[index];
 +  
 +**Codebeispiel**
 +  
 +  <p>Text A</p>
 +  <p>Text B</p>
 +  <script>
 +      let alleAbschnitte = document.getElementsByTagName("p");
 +      alleAbschnitte[1].innerHTML = "Ich bin der zweite Absatz – verändert!";
 +  </script>
 +  
 +
 +----
 +  
 +==== 4. document.querySelector() ====
 +
 +  * Findet das erste Element, das zu einem CSS-Selektor passt.
 +  * Modern, flexibel, unterstützt komplexe Selektoren (ID, Klasse, Attribute …).
 +
 +**Syntax**
 +
 +  document.querySelector("css-selector");
 +  
 +**Codebeispiel**
 +
 +  <p id="a">1</p>
 +  <p class="b">2</p>
 +  <p class="b">3</p>
 +  <script>
 +      document.querySelector(".b").style.fontWeight = "bold";  // trifft nur das erste .b
 +  </script>
 +
 +
 +===== Lernvideos =====
 +
 +<color #ed1c24>TBD</color>
 +
 +===== Zusatzmaterial =====
 +  * [[https://www.w3schools.com/js/js_htmldom.asp|W3School - HTML-DOM]]
 +  * [[https://wiki.selfhtml.org/wiki/JavaScript/DOM|SelfHTML- HTML DOM]]
 +
 +----
 +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir