Introduction to the DOM
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
When a web page loads, the browser creates a DOM tree from the HTML markup. Every HTML element becomes a node in this tree, and JavaScript can access and manipulate these nodes.
The DOM Tree Structure
Think of the DOM as a family tree:
- The <html> element is the root.
- <head> and <body> are children of <html>.
- Elements inside <body> are children, siblings, or descendants.
Example HTML and its DOM tree concept:
The document Object
JavaScript provides a global object called document that represents the entire page. It's your entry point to the DOM.
Why the DOM Matters
Without the DOM, web pages would be static. JavaScript uses the DOM to:
- Change text or HTML content dynamically.
- Respond to user actions (clicks, typing).
- Add, remove, or modify elements.
- Update styles and create animations.
Simple DOM Manipulation Example
Quick Quiz
Wir haben die Materialien überprüft, dennoch können Fehler vorkommen. Der Inhalt dient ausschließlich Bildungszwecken, daher verwende ihn auf eigene Verantwortung und überprüfe ihn bei Bedarf mit anderen Quellen.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
