### Working With the DOM

To interact with the HTML elements of our page we'll need to use some methods and properties of the document object.

#### getElementById and innerHTML

To select HTML elements we can search for them by their class name, Id, tag name (h1, p, img, div, etc.) and more. Let's start by the Id which is the easiest way.

This element has id="blue_box". Can you get the text inside it and send it to the console? And can you change its content?

To select the blue box we need to use the getElementByID method and the innerHTML property. (Remember that Javascript is a "case sensitive" language, so be careful with the letters that must be written in Caps).

        // Getting the content of an element
        document.getElementById("blue_box").innerHTML;

        // Changing the content of an element
        document.getElementById("blue_box").innerHTML = "This will be the new content of the element.";

Now based on what we've seen above, let's try to send the content of the blue box to the console then change its content.

        console.log( document.getElementById("blue_box").innerHTML );
        document.getElementById("blue_box").innerHTML = "Some new content";

This seems like a silly example but this is just the starting point to understand how to work with elements and their content.

We'll soon start doing more complex examples like getting user input, changing CSS of elements, and what's more important: performing those actions after an event is fired by the user, like the click of a button.

Before we can start doing that though, there is some basic knowledge about Javascript and programming in general that we need to acquire first.

### Contents