====== 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