This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "Document Object Model (DOM)" Lesson
>> 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.
>> 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.
>> 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.
>> 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: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.
>> 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.
[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.
>> 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.