### DOM - Document Object Model

Now that we've had a short introduction about how Javascript works, we need to learn how we can interact with the elements of our page.

#### What is the DOM?

The Document Object Model is an object created by the web browser as soon as the page is loaded. This object contains all the nodes of our HTML page, which are the HTML elements. A simple example is provided below:

        <html>

            <head>
                <title>My Title</title>
            </head>

            <body>
                <h1>My Header</h1>
                <a href="#" >My Link</a>
            </body>

        </html>

When the page is loaded, the browser generates the DOM tree, as shown below:

Image: Representation of the DOM tree.

On the image we can see that the parent element of all other elements in the DOM is the Document object. So we will always use this object to select elements on our page.

With the DOM we'll be able to:

- Add, change and remove HTML elements
- Change attributes of HTML elements (like the 'class' or the 'src' of an image.)
- Change the CSS
- React upon page events (click, scroll, form input, hover, etc)

In the next lesson we'll start interacting with the elements of our page.

### Contents