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/05 01:25] – vdemirde:modul:m288:learningunits:lu08:03do_edit [2025/12/18 08:05] (aktuell) – [4. document.querySelector()] vdemir
Zeile 1: Zeile 1:
-====== LU08c - DOM-Methoden - TBD ======+====== LU08c - DOM-Methoden ======
  
 ===== Lernziele ===== ===== 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 ===== ===== 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.  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. 
 +
 +  * getElementByID
 +  * getElementsByClassName
 +  * getElementsByTagName
 +  * querySelector
 +
 +
 +Die in der Demonstration verwendeten Beispielscripte finden Sie hier {{ :de:modul:m288:learningunits:lu08:lu08_demo.zip |}}
 +
 +----
  
 ==== 1. document.getElementById() ==== ==== 1. document.getElementById() ====
Zeile 22: Zeile 34:
       document.getElementById("titel").innerHTML = "Text erfolgreich geändert!";       document.getElementById("titel").innerHTML = "Text erfolgreich geändert!";
   </script>   </script>
-  + 
 +---- 
 ==== 2. document.getElementsByClassName() ==== ==== 2. document.getElementsByClassName() ====
   * Liefert alle Elemente einer bestimmten CSS-Klasse als HTMLCollection (ähnlich wie ein Array).   * Liefert alle Elemente einer bestimmten CSS-Klasse als HTMLCollection (ähnlich wie ein Array).
Zeile 39: Zeile 53:
       document.getElementsByClassName("info")[1].style.color = "red";       document.getElementsByClassName("info")[1].style.color = "red";
   </script>   </script>
 +
 +----
      
 ==== 3. document.getElementsByTagName() ==== ==== 3. document.getElementsByTagName() ====
Zeile 58: Zeile 74:
   </script>   </script>
      
 +
 +----
      
 ==== 4. document.querySelector() ==== ==== 4. document.querySelector() ====
Zeile 74: Zeile 92:
   <p class="b">3</p>   <p class="b">3</p>
   <script>   <script>
-      document.querySelector(".b").style.fontWeight = "bold";  // trifft nur das erste .b+      document.querySelector(".b").style.fontWeight = "bold";   
 +      // triff nur das erste .b, alle anderen werden ignoriert    
   </script>   </script>
  
 +**Codebeispiel**
 +
 +Damit wir alle p-Elemente verändern, braucht es eine Schleife.
  
-===== Lernvideos =====+      const alleP = document.querySelectorAll("p"); 
 +      // jedem die neue Klasse geben 
 +      alleP.forEach(p => p.className = "beschreibung");
  
-<color #ed1c24>TBD</color> 
  
 ===== Zusatzmaterial ===== ===== Zusatzmaterial =====
  • de/modul/m288/learningunits/lu08/03do_edit.1764894349.txt.gz
  • Zuletzt geändert: 2025/12/05 01:25
  • von vdemir