The DOM

What is 'The DOM'?

'The DOM' is the HTML you can see in Chrome Debugger's element inspector

Your browser keeps track of the HTML it currently has rendered on the screen. It represents this internally as a bunch of Javascript variables.

You can see a nice representation of the current DOM in the Chrome Debugger's element inspector.

Functions to access the DOM

Javascript has some built in functions to allow you to read and edit the DOM.

Example:

document.querySelectorAll(".red")

This code searches the DOM (what you see inside element inspector) for all elements which have the "red" css class applied.

<p class="red">Red Text</p>

If you had a <p class="red"> like the one above, then document.querySelectorAll(".red") would return it as part of a list of matching elements.

Node has no DOM

If you're running Node (not a browser) there is no DOM, because there is no HTML being rendered! The function mentioned above doesn't exist inside Node.

Vanilla Javascript is an optional part of the course

Once you've completed this course you shouldn't need to use Vanilla Javascript very often (if at all), instead you'll be using React.

We have this section because it's a nice milestone you can achieve quickly!

If you'd like to skip - that's fine, you should continue to the Modern Interactive Websites section.

However, I recommend continuing, we're going to go fast, and not too deep, since it's just a step on your way to Modern Interactive Website greatness and you'll also learn some useful things about the DOM along the way.