Introduction to the DOM

"Too bad! Same old story! Once you've finished building your house you notice you've accidentally learned something that you really should have known – before you started".

 – Friedrich Nietzsche, Beyond Good and Evil

When you open a web page in your browser, the browser retrieves the page's HTML text and parses it. The browser builds up a model of the document's structure and uses this model to draw the page on the screen.

This representation of the document is one of the toys that a JavaScript program has available in its sandbox. It is a data structure that you can read or modify. It acts as a live data structure: when it's modified, the page on the screen is updated to reflect the changes.

Source: Marijn Haverbeke, https://eloquentjavascript.net/14_dom.html
This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 License.