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
Hemos revisado y comprobado los materiales, pero aún pueden existir errores. El contenido se ofrece únicamente con fines educativos, así que úsalo bajo tu propia responsabilidad y verifica con otras fuentes si es necesario.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
