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
We have reviewed and checked the materials, but errors may still occur. The content is provided for educational purposes only, so use it at your own responsibility and verify with other sources if needed.
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
