Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Document Object Model (DOM)" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates the way that JavaScript, HTML, and CSS interact with each other through the document object model (DOM).

Get Free Access Now

Transcript from the "Document Object Model (DOM)" Lesson

[00:00:00]
>> Brian Holt: Let's go to talk about the DOM.
>> Brian Holt: And I promise you, after the DOM I will give you all a break.
>> Brian Holt: [LAUGH] The DOM. The DOM stands for document object model. I think, doesn't matter, everyone calls it the DOM, no one will reference what it actually stands for.

[00:00:24] The DOM is the way that JavaScript interacts with HTML and CSS. It's kind of like the bridge between the two. So that window thing that we were talking about before, the global context, that is more or less what the DOM how you're going to be interacting with the DOM, it's own Window.

[00:00:45]
>> Brian Holt: In fact, console.log is actually technically a part of this document object model.
>> Brian Holt: So
>> Brian Holt: Let's just kinda take a side step here for just a second to understand how a browser kind of works. And I think that's kinda helpful to illustrate why the need for the DOM and why we have the DOM.

[00:01:10] So I'm gonna talk about just the normal process of going from writing code to actually interacting with your browser. So you write code in your editor, like VSCode for example, or Sublime, or whatever you're writing it in. You then, at some point, put your code out onto a server.

[00:01:27] This server could be something like Microsoft Azure, it could be AWS, which is Amazon Web Services, or it could be something like a shared hosting provider, like Bluehost, or 1and1, or HostGator, or GoDaddy, or something like that. It could be like a VPS, like DigitalOcean, which is a virtual private server, I think, yeah.

[00:01:46] It could be any number of these. These are all just servers out there on the Internet that you can put stuff on and then people can ask for things from.
>> Brian Holt: So I put it out. Let's say it's on my Cloud provider. So it's out on Microsoft Azure.

[00:02:04] And someone types in www.bryanholdsamazingwebsite.party, I don't know. Don't go there, it's not a real website, pretty sure. Someone's going to buy it now, it's gonna be porn. [LAUGH] Don't go there. Don't go to that website. But if someone types in www.example.com, I know that ones okay. [LAUGH] It then get routed through a bunch of magic, which I'm not going to talk about right now.

[00:02:30] But it lands on my server, right? My server receives this request, it then serves back to you the code that I wrote, right? It serves back to the index.html that I wrote back to you.
>> Brian Holt: So the server sends a copy of the HTML, the browser then reads the HTML, right?

[00:02:47] So it has this engine inside of it that reads the HTML. And it sees in there that I have a script tag on there, and says like you have my script.js, cool. It then makes another request back to the server. The server says, cool, you're asking for my script.js.

[00:03:03] It gives you back that. It then starts reading that JavaScript and executing that JavaScript. This is the exact same process that happens with CSS as well, okay?
>> Brian Holt: So that's the way that this ends up on your computer. Yeah?
>> Student: So, I don't personally have a server at home.

[00:03:23] Would that, your server, is that gonna be what we're [INAUDIBLE] host your website?
>> Brian Holt: Yep, yep, exactly. So you would put it on something like Azure or AWS or Bluehost or something like that.
>> Brian Holt: So we've been able to open it on our local computer, right? So I've been able to use File:///.

[00:03:47] That's your computer acting as if it was a server to itself, right? So it's pretending that it's a server out there in the Cloud. But in reality, it's making a request to itself, and it's then it's serving its own request back to the browser. That's the way that that's working.

[00:04:07]
>> Brian Holt: So that kinda means that JavaScript is interacting inside some sort of HTML environment. So if I'm gonna bring this up again.
>> Brian Holt: clear(), there we go. So I can start looking at something on here called window, and window has something on it called document.
>> Brian Holt: Document refers to the HTML page that I'm on.

[00:04:35] And I can start manipulating this via a number of different APIs. So that's what the DOM is. The DOM is this ability to interact with your HTML page.
>> Brian Holt: So just like I've been telling you not to use style like this, I'm also going to start using script like this.

[00:04:56] But typically, you do not wanna have your HTML and your scripts shoved together. You wanna have a separate file that you'll load differently. But for illustrations purposes that I want you to be able to see how we're interacting with our JavaScript and our HTML all at once, I'm gonna put them inside of each other.

[00:05:11] So technically, you can put JavaScript inside of script tags like this, just don't, okay? But for the purpose of this class, so you can see that I have a red square right here, right? So I have CSS here that makes this square red. Background color crimson. It's a shade of red.

[00:05:28] And then here, using script, I'm coming in and saying const redSquare = document.querySelector('.red-square'). Okay? So that's what querySelector does. You give it a CSS selector. So .red-square. That's a class, right? If you remember from your CSS. It looks exactly like this one. It's going to go select this one on the page.

[00:05:53] So now, red square is this div, okay? Do we follow so far? That's what query selector does. It gets the first instance of that on the page. Most of these methods that you're gonna be interacting with the DOM with are on this document object. So get used to interacting the document.

[00:06:12] So we use querySelector. You give it a CSS selector, and it gives you back the first instance of that on the page, the first one that it finds. There is also querySelector all. So just add all here
>> Brian Holt: Wonder if I did that, what would it do?
>> Brian Holt: RedSquare.

[00:06:39]
>> Brian Holt: Nope, still doesn't care. Cool, anyways, querySelector All will select every one of those on the page, right? And it will give you back an array of all those on the page. So if you wanna get all of them, you'll use querySelector All.
>> Brian Holt: So from here, red-square represents this HTML element.

[00:06:59] So you're storing that in the variable. It's an object, as you might imagine. Here, we set background color.
>> Brian Holt: So you might be a little mystified that this is background dash color in CSS, but in JavaScript it's background color, camel cased. They did that on purpose. So anything that you use dashes here for in CSS, you'll just change that to camel case in your head.

[00:07:25] So if I wanted to do padding left I will do paddingLeft equals that, right?
>> Brian Holt: So yeah, you change that to camel case when you're interacting with CSS.
>> Brian Holt: And then, we we assign it to whatever value we want. So if we were doing paddingLeft, you can set it to 50 pixels, and that's how you would do that.

[00:07:51]
>> Brian Holt: Questions about that?
>> Brian Holt: There's tons more you can do with just changing its style. You can change its inner HTML, you can change its inner text, you can find out where it's positioned on the page, you can find out if it's visible to the user right now or not.

[00:08:09] There's a bunch of, you can find out the scroll position. We saw what scroll position looks like.
>> Brian Holt: Tons and tons of stuff that you're able to do.
>> Brian Holt: So what happens if I wanted to change more than one? So lets say I have this ul right here, full of lis, and I wanted to change some of these and not all of these.

[00:08:39] So I gave the ones that I wanted to changed this js-target class. And these ones I didn't give a class at all. So this ones Unchanged, Unchanged
>> Brian Holt: And that one broke.
>> Brian Holt: Okay, there we go. Unchanged, unchanged, unchanged, right? And this one's won't change. So here, I said, now you say querySelectorAll, which is the one we're talking about.

[00:09:09] It finds everything that's a js-target, which gives me back an array of
>> Brian Holt: Elements, right? Of these various lis. Then, I use a for loop. Go over these. And this is the current element. And then, I say currentElement.innerText, which is how you modify the text of something. And I set it to be something else.

[00:09:34] Modified by JavaScript. So you can see here, none of these are unchanged. It's either Modified by JavaScript or Won't Change.