The DOM is the browser’s internal representation of a web page. When the browser retrieves your HTML from your server, the parser analyzes the structure of your code and creates a model of it. Based on this model, the browser then renders the page on the screen.
Browsers expose an API that you can use to interact with the DOM. This is how modern JavaScript frameworks work - they use the DOM API to tell the browser what to display on the page.
In Single Page Applications, the DOM continuously changes to reflect what appears on the screen, and as a developer you can inspect it using the browser Developer Tools.
The DOM is language-agnostic, and the de-facto standard to access the DOM is by using JavaScript, since it’s the only language that browsers can run.
The DOM is standardized by WHATWG in the DOM Living Standard Spec.
With JavaScript you can interact with the DOM to:
- inspect the page structure
- access the page metadata and headers
- edit the CSS styling
- attach or remove event listeners
- edit any node in the page
- change any node attribute
.. and much more.
The main 2 objects provided by the DOM API that you you will interact the most with are document and window.
Lessons in this unit:
| 0: | ▶︎ Introduction |
| 1: | The `window` object |
| 2: | The `document` object |
| 3: | Types of nodes |
| 4: | Traversing the DOM |
| 5: | Editing the DOM |