Intro to the DOM

When it comes to using JS in the browser, it has tremendous powers. As we'll soon see, it has the ability to change virtually everything in an HTML document, both the structure in the form of the HTML tags as well as the styling of page through CSS.

But in order to do this, we need a bridge, we need a way to connect our JS to the HTML and CSS, to be able to interact with them. Fortunately we have an interface in the form of what's known as the DOM, which stands for the Document Object Model.

Up until this point, we've had access to the global object from anywhere within our app, which we know as the window object. And on the window, we have a property called document. This is what we're talking about when speak about the DOM.

But what is it? The document property is an object that represents all of the HTML document as objects that can be modified, in particular, modified by JavaScript. The classic way to visualize the DOM is as a tree. And each element in our HTML document are called nodes. For example, the html, head and body tags are all element nodes. And if there is any text inside each element, they form individual nodes as well, called text nodes.

So each node in this tree is made into an object by the DOM that we can interact with through JavaScript.

So let's start working with the DOM. Again, we'll find it from window.document or just document. Off of the document object you'll find properties to get access to the most important nodes, representing the head as well as the body tags. So let's say document.body

console.log(document.body);

And we get back to us this result that looks like the body tag. But in fact it is an object, and we can see with our intellisense a bunch of the available properties and methods available on it.

HTML in the DOM

So what can we do with the DOM? We can dynamically add static HTML. For example, let's say we wanted to add some text to the page, currently we have none. We can do this entirely through JS.

To create a new element node with the DOM, we can say document.createElement. This createElement method can make any valid HTML element, so since we want to add some text let's use a paragraph element, so we'll pass in 'p':

document.createElement("p");

And we can store this created element in a variable of the same name:

const p = document.createElement("p");

And something important to remember that I mentioned earlier, that a lot of JS developers don't get about working with the DOM is the fact that the DOM represents our HTML by turning them into objects. Nodes are just objects. So as a result, since we know how to work with objects in-depth, we already know how to work with the DOM, aside from learning some new methods and properties.

So now we have an empty element node, but now we need to add text content to it. To do that, we use the dot syntax to update a property that controls the text content of elements called innerText. Note that you don't have to worry about doing this immutably. And we'll set innerText to hello world:

p.innerText = "hello world";

So now we have an element node, a paragraph element, with a text node within it, and now we want to add it to the page. So since visible content is added within the body, let's select the body again and add the p element to it using the method appendChild:

document.body.appendChild(p);

And as soon as we run that, we see hello world on the page.

CSS in the DOM

What about styles though? How do we change the styles of the page. Again, all of the styles are linked to the nodes and available primarily on a single property called style.

So for example, say we wanted to color the background of the page and the color of our text.

To update the body styles, we say document.body.style and we see every available property that we can update. All of the style rules that we could write with CSS is now possible to write in JS. So let's select the background property and set it equal to whatever color we like. Note that it must be written as a string.

document.body.style.background = "palegoldenrod";

And to change the p element that we created, since we have a reference to it, we can change it's text color with the color property:

p.style.color = "#05f";

JS to page with DOM

And finally, aside from getting or changing static HTML or CSS, we can also add JS to the page. Say to show an alert whenever the user clicks the text:

p.addEventListener("click", () => console.log("Text clicked!"));

So if I click the text body, nothing happens, but if I click the text, we get the alert.

Review

So that was a very brief overview of the scope of what you can do with the DOM. It is no stretch to say that the DOM is what makes all web applications possible by giving us a necessary interface for working with all of the parts of the page, HTML, CSS and making them dynamic through the power of JS. We're going to doing a deep dive into the DOM in this section and all of the things it can do.

And finally, it is important to know that what the document represents is not the HTML document itself. It just a representation of it, for JS to use. But when we work with the DOM, however, as you can see, the changes that we make will be displayed on the page as we make them, in real-time.