de:modul:m291:learningunits:lu04:theorie:a_dom

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:lu04:theorie:a_dom [2026/03/01 21:14] – gkochde:modul:m291:learningunits:lu04:theorie:a_dom [2026/03/01 22:13] (aktuell) – gkoch
Zeile 1: Zeile 1:
-====== LU04 – Das DOM (Document Object Model) ======+====== LU04a – Das DOM (Document Object Model) ======
  
  
Zeile 11: Zeile 11:
  
 Jede Verschachtelung in HTML wird im DOM zu einer Eltern-Kind-Beziehung: Jede Verschachtelung in HTML wird im DOM zu einer Eltern-Kind-Beziehung:
 +<WRAP round center box 60%>
 <code> <code>
 document document
Zeile 24: Zeile 24:
                 └── <p> "Hallo Welt"                 └── <p> "Hallo Welt"
 </code> </code>
 +</WRAP>
  
 ===== Elemente auswählen ===== ===== Elemente auswählen =====
Zeile 30: Zeile 30:
 Um ein Element zu verändern, müssen Sie es zuerst «abholen»: Um ein Element zu verändern, müssen Sie es zuerst «abholen»:
  
 +<WRAP round center box 80%>
 ^ Methode ^ Beschreibung ^ Hinweis ^ ^ Methode ^ Beschreibung ^ Hinweis ^
 | ''querySelector()'' | Erstes Element, das dem CSS-Selektor entspricht | Flexibelste Methode | | ''querySelector()'' | Erstes Element, das dem CSS-Selektor entspricht | Flexibelste Methode |
Zeile 41: Zeile 42:
 const logo = document.getElementById('logo'); const logo = document.getElementById('logo');
  
-// Mehrere Elemente greifen+// Mehrere Elemente ansprechen
 const allePanels = document.querySelectorAll('.panel'); const allePanels = document.querySelectorAll('.panel');
  
Zeile 49: Zeile 50:
 }); });
 </code> </code>
 +</WRAP>
  
 ===== Elemente verändern ===== ===== Elemente verändern =====
Zeile 56: Zeile 57:
  
 Die sauberste Methode für Style-Änderungen – Sie definieren den Stil im CSS und schalten die Klasse per JS: Die sauberste Methode für Style-Änderungen – Sie definieren den Stil im CSS und schalten die Klasse per JS:
 +<WRAP round center box 60%>
 <code javascript> <code javascript>
 const panel = document.querySelector('.panel'); const panel = document.querySelector('.panel');
Zeile 65: Zeile 66:
 panel.classList.contains('open'); // true oder false zurückgeben panel.classList.contains('open'); // true oder false zurückgeben
 </code> </code>
 +</WRAP>
  
 ==== Attribute setzen und lesen ==== ==== Attribute setzen und lesen ====
 +<WRAP round center box 60%>
 <code javascript> <code javascript>
 // Attribut setzen // Attribut setzen
Zeile 75: Zeile 77:
 btn.getAttribute('aria-expanded'); // → 'true' btn.getAttribute('aria-expanded'); // → 'true'
 </code> </code>
 +</WRAP>
  
 ==== Elemente ein- und ausblenden ==== ==== Elemente ein- und ausblenden ====
  
 Die eleganteste Methode: den Zustand im CSS definieren und per JS die Klasse togglen. Die eleganteste Methode: den Zustand im CSS definieren und per JS die Klasse togglen.
 +<WRAP round center box 60%>
 <code css> <code css>
 /* CSS: standardmässig versteckt */ /* CSS: standardmässig versteckt */
Zeile 97: Zeile 100:
 panel.classList.toggle('open'); // ein ↔ aus panel.classList.toggle('open'); // ein ↔ aus
 </code> </code>
 +
 +</WRAP>
  • de/modul/m291/learningunits/lu04/theorie/a_dom.1772396098.txt.gz
  • Zuletzt geändert: 2026/03/01 21:14
  • von gkoch