de:modul:m291:learningunits:lu05:theorie:a_dom_traversal

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:m291:learningunits:lu05:theorie:a_dom_traversal [2026/03/08 23:18] – gkochde:modul:m291:learningunits:lu05:theorie:a_dom_traversal [2026/03/08 23:24] (aktuell) – gkoch
Zeile 91: Zeile 91:
 ===== Schritt 2: querySelector vs. querySelectorAll ===== ===== Schritt 2: querySelector vs. querySelectorAll =====
  
-{{:de:modul:m291:learningunits:lu05:theorie:queryselector_all_0.4x.png?direct&1100| Vergleich querySelector() vs. querySelectorAll()}}+{{:de:modul:m291:learningunits:lu05:theorie:queryselector_all_0.4x.png?direct&1200| Vergleich querySelector() vs. querySelectorAll()}}
  
 Als Erstes selektieren wir die Elemente im DOM. Was passiert, wenn wir ''querySelector()'' verwenden? Als Erstes selektieren wir die Elemente im DOM. Was passiert, wenn wir ''querySelector()'' verwenden?
Zeile 177: Zeile 177:
  
  
-``` 
 ===== Schritt 4: Das richtige Panel finden – DOM Traversal ===== ===== Schritt 4: Das richtige Panel finden – DOM Traversal =====
  
Zeile 189: Zeile 188:
  
 Die sauberere Lösung nutzt die **Struktur des DOMs** selbst. Im HTML ist jedes Panel das direkte Geschwister-Element des zugehörigen Buttons: Die sauberere Lösung nutzt die **Struktur des DOMs** selbst. Im HTML ist jedes Panel das direkte Geschwister-Element des zugehörigen Buttons:
 +<WRAP center round box 80%>
 <code html> <code html>
 <div class="accordion-item"> <div class="accordion-item">
Zeile 196: Zeile 195:
 </div> </div>
 </code> </code>
 +</WRAP>
  
-Mit ''nextElementSibling'' navigieren wir direkt vom geklickten Button zu seinem Panel – unabhängig von Indizes:+Mit ''nextElementSibling'' navigieren wir direkt vom geklickten Button zu seinem Panel:
  
 <WRAP center round box 80%> <WRAP center round box 80%>
Zeile 238: Zeile 238:
  
 Testen Sie: Alle Panels sollten sich jetzt öffnen lassen – aber noch nicht schliessen. Testen Sie: Alle Panels sollten sich jetzt öffnen lassen – aber noch nicht schliessen.
- 
----- 
  
 ===== Schritt 5 & 6: Zum finalen Script ===== ===== Schritt 5 & 6: Zum finalen Script =====
Zeile 271: Zeile 269:
 buttons.forEach((button) => { buttons.forEach((button) => {
   button.addEventListener('click', (e) => {   button.addEventListener('click', (e) => {
-    const btn          = e.currentTarget;           // ✅ immer der <button> +    const btn          = e.currentTarget;           // immer der <button> 
-    const panelElement = btn.nextElementSibling;    // ✅ direkt das zugehörige Panel+    const panelElement = btn.nextElementSibling;    // direkt das zugehörige Panel
     const panelIsOpen  = panelElement.classList.contains('open'); // aktuellen Zustand lesen     const panelIsOpen  = panelElement.classList.contains('open'); // aktuellen Zustand lesen
  
Zeile 300: Zeile 298:
  
 Das ''setAttribute('aria-expanded', ...)'' erklären wir ausführlich in den folgenden Seiten. Das ''setAttribute('aria-expanded', ...)'' erklären wir ausführlich in den folgenden Seiten.
-``` 
- 
- 
  
  
  • de/modul/m291/learningunits/lu05/theorie/a_dom_traversal.1773008322.txt.gz
  • Zuletzt geändert: 2026/03/08 23:18
  • von gkoch