Introduction to the DOM

The power of JavaScript is its use in dynamically displaying and manipulating elements on a webpage written in HTML. We know that an HTML page consists of elements such as <head><body> <h1> tags or text fields and buttons. The DOM or Document Object Model represents the structure of these elements as a "tree" data structure after your web browser reads a page. The DOM Application Programming Interface (API) contains methods that provide JavaScript access to these elements. Start by reading this article to learn about the document structure of the DOM and how to find, create and change elements.

"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
Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 License.