\n\n\n\n

The DOM for this document might look like this:
\n<\/p>\n\n

Document\n ├── html\n     ├── head\n     │    └── title\n     └── body\n          └── div#content\n               ├── h1\n               └── p\n<\/pre>\n\n\n\n
\n  \n  \n  Wie JavaScript das DOM verwendet:\n<\/h3>\n\n
\n
\nZugriff auf Elemente<\/strong>: JavaScript kann mithilfe von Methoden wie document.getElementById() oder document.querySelector() Elemente aus dem DOM ausw?hlen und darauf zugreifen.\n<\/li>\n<\/ol>\n\n
   let heading = document.getElementById(\"content\");\n<\/pre>\n\n\n\n
\n
\nElemente manipulieren<\/strong>: JavaScript kann den Inhalt, die Attribute oder den Stil von Elementen ?ndern.\n<\/li>\n<\/ol>\n\n
   heading.innerHTML = \"New Content\";\n   heading.style.color = \"red\";\n<\/pre>\n\n\n\n
\n
\nEreignisbehandlung<\/strong>: JavaScript kann Ereignis-Listener an DOM-Elemente anh?ngen, um auf Benutzeraktionen wie Klicks, Tastendrücke usw. zu reagieren.\n<\/li>\n<\/ol>\n\n
   document.getElementById(\"myButton\").addEventListener(\"click\", function() {\n     alert(\"Button clicked!\");\n   });\n<\/pre>\n\n\n\n
\n
\nElemente erstellen und entfernen<\/strong>: JavaScript kann dynamisch neue Elemente erstellen oder vorhandene entfernen.\n<\/li>\n<\/ol>\n\n
   const newElement = document.createElement(\"div\");\n   document.body.appendChild(newElement);\n<\/pre>\n\n\n\n
\n  \n  \n  Warum das DOM wichtig ist:\n<\/h3>\n\n<\/pre>\n
\n
Es bietet JavaScript die M?glichkeit, mit der Struktur und dem Inhalt einer Webseite zu interagieren und diese zu manipulieren.<\/li>\n
Es erm?glicht dynamische, interaktive Webseiten, ohne dass ein Neuladen der Seite erforderlich ist (z. B. zum Aktualisieren der Benutzeroberfl?che oder zum Verarbeiten von Benutzereingaben).<\/li>\n<\/ul>\n\n
\n  \n  \n  DOM-Methoden:\n<\/h3>\n\n
Hier sind einige h?ufig verwendete DOM-Methoden in JavaScript:<\/p>\n
\n
\ngetElementById(): W?hlt ein Element anhand seiner ID aus.<\/li>\n
\nquerySelector(): W?hlt das erste passende Element mithilfe eines CSS-Selektors aus.<\/li>\n
\ncreateElement(): Erstellt ein neues HTML-Element.<\/li>\n
\nappendChild(): Fügt einem Element einen neuen untergeordneten Knoten hinzu.<\/li>\n
\nremoveChild(): Entfernt einen untergeordneten Knoten aus einem Element.<\/li>\n
\nsetAttribute(): Setzt ein Attribut für ein Element.<\/li>\n
\naddEventListener(): Fügt einem Element einen Event-Handler hinzu.<\/li>\n<\/ul>\n\n
\n  \n  \n  Beispiel in Aktion:\n<\/h3>\n\n\n\n
\n\n  \n