So we've learned a lot about JavaScript so far. Now comes the important question: what does this have to do with web development?

In short, it's all about the DOM! Let's start by understanding what the DOM and the DOM API are, and how that impacts the websites that we build.

So what is the DOM?

Video summary 🎥

Parts of this section were inspired by Cassidy Williams' amazing Udemy course linked below. Most of it is behind a paywall, but I would definitely check out "The DOM" → "What Can I Do with the DOM?" This is an invaluable demo of how to query the DOM with confidence. Plus, it's free to watch!

JavaScript and React for Developers: Master the Essentials

Written summary

The DOM stands for the "document object model." The name kind of implies its use case: it's a "model" of the "document," or web page, that we can access via JavaScript to change things within that document.

Here's an example of how a webpage may be modeled by the DOM. Say our HTML looks like this:

<head>
	<title>Name of my website</title>
</head>
<body>
	<h1>My fancy page title</h1>
	<ul>
		<li>Snazzy list item 1</li>
		<li>Snazzy list item 2</li>
	</ul>
</body>

Now, we can break this down into a tree based on its hierarchy (aka what's nested inside of what):

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1cc5b662-4196-4fcf-a2ef-07ac3f408628/Untitled.png

This is what our HTML document looks like to JavaScript. We view this tree directly from JavaScript by querying the DOM.

For example, say we wanted to see what our ul looks like. We can go ahead and see all of the properties that element has using console.dir:

Note: the full command used is console.dir(document.getElementsByTagName('ul')). Don't worry too much about that syntax yet. it will be explained shortly!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6baf33e0-bbba-4175-9db8-1b7c63f20243/Untitled.png

Woah! That's a lot of properties. What we're seeing here is every piece of information about a specific HTML element, some of which we can modify using the magic of JS. Some properties worth highlighting are children and firstElementChild, each of which tell us about the element "nodes" further down in our tree. Under children, we can see an array of li elements as we would expect.

How do I get stuff in the DOM?

The previous example showed the big dump of information we can get about an HTML element. So how do we get and use that information to make stuff happen?

Getting elements

The most important part of DOM manipulation is figuring out how to grab the right elements. Here are a few of the most important methods of querying you need to know.