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
Az anyagokat átnéztük és ellenőriztük, de hibák továbbra is előfordulhatnak. A tartalom kizárólag oktatási célt szolgál, ezért saját felelősségre használd, és szükség esetén ellenőrizd más forrásokkal is.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
