Introduction to the DOM

The Document Object Model (DOM) is the object representation of the structure, style, and content of a web document.

The DOM API allows interaction with HTML and CSS through JavaScript.

The DOM: Document Object Model

When the browser reads the HTML, it converts the nodes (i.e., tags, comments, texts...) into objects that can be manipulated by JavaScript. DOM elements are not part of the JavaScript language and are therefore not standardized by TC39 but by the W3C.

The DOM represents the HTML document as a tree: Each branch is a node, and each node can contain one or more other nodes.

For example, from this (very simple) code:

html

<body>
    <header>
        <h1>
            ESILV Course
        </h1>
    </header>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
    <footer>Stanislas Ormières</footer>
</body>

The browser will generate a tree that looks like this:

DOM Representation

Each of these rectangles in the diagram is an object, with a (very) large number of properties. These properties allow programmatic access to their content, the attributes of the tags, the tag name, and attaching events (see later). You can also change the content, the attributes and their values, change the tag type (change "h1" to "h2", add a CSS class...), you can also remove content and add new content.

For more details, visit the introduction to the DOM on MDN

Introduction to the DOM ​

The DOM: Document Object Model ​

Introduction to the DOM

The DOM: Document Object Model