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:22] – gkochde:modul:m291:learningunits:lu05:theorie:a_dom_traversal [2026/03/12 14:23] (aktuell) – gkoch
Zeile 18: Zeile 18:
 <WRAP tip round center 80%> <WRAP tip round center 80%>
 **Projektaufbau:** Erstellen Sie drei Dateien: ''index.html'', ''script.js'' und ''style.css''. **Projektaufbau:** Erstellen Sie drei Dateien: ''index.html'', ''script.js'' und ''style.css''.
-{{:de:modul:m291:learningunits:lu05:theorie:screenshot_2026-03-08_at_16.20.42.png?nolink&400 |}}+{{:de:modul:m291:learningunits:lu05:theorie:screenshot_2026-03-08_at_16.20.42.png?nolink&400|}}
 \\ \\
 Verlinken Sie CSS- und JavaScript-File im HTML: Verlinken Sie CSS- und JavaScript-File im HTML:
-  - **CSS:** im ''<head>'' mit ''<link href="style.css" rel="stylesheet">'' +  - **CSS:** im ''<head>'' mit <code html><link href="style.css" rel="stylesheet"></code> 
-  - **JS-Script:** am Ende des ''<body>'' mit ''<script src="script.js"></script>''.+  - **JS-Script:** am Ende des ''<body>'' mit <code html><script src="script.js"></script></code>.
 \\ \\
 Testen Sie zuerst, ob die Verlinkung klappt – dieser Code gehört in ''script.js'': Testen Sie zuerst, ob die Verlinkung klappt – dieser Code gehört in ''script.js'':
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 269: 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
  
  • de/modul/m291/learningunits/lu05/theorie/a_dom_traversal.1773008565.txt.gz
  • Zuletzt geändert: 2026/03/08 23:22
  • von gkoch