The DOM

[00:00:00]
>> Let's start talking about the DOM. D-O-M, Document Object Model. You've actually already been interacting with the DOM a little bit, just because Window technically is part of the DOM. We're getting to this weird territory where there's a spec for JavaScript, this language, right. But there's also the spec for this thing called the DOM which is how browsers interact with JavaScript.

[00:00:29]
Window is actually not a part of JavaScript, it's part of the DOM. Do you really need to care which is which? No, [LAUGH]. But I just want you to know that there's two things in play here. And again, it becomes much more important if you start trying to write Node, because all the stuff that you have in the DOM ends up not being available in Node or Deno or other runtimes like that.

[00:00:57]
So, the DOM defines how JavaScript interacts with HTML and CSS. That's the entire gist of it right there. It's just a bunch of objects and methods that you can call to say, hey, I want to interact with the DOM in such a way, right. If I'd press this button, do this thing, would be you interacting with the DOM via JavaScript.

[00:01:18]
So, let's look at a really simple example first. Let's say I have this div and I give it a class of red-square, right. And I gave it this kind of CSS. Crimson, I give it a width of 100 pixels and height 100 pixels. Then I grabbed this in JavaScript using document, oops, .querySelector, which allows me to give it a CSS selector, just like one that you would see in the CSS selector part, right.

[00:01:54]
I say give me this red square. So now I have a handle on this, right. I have this object here that represents this square in the DOM, right. I can then say, redSquare.style.backgroundColor = limegreen. So programmatically, I can overwrite the CSS. And try it, right. If I put blue here, its gonna change.

[00:02:19]
Pink. 123, that's gonna be black, right. Someone told me about fogdog, f06d06, that's a lovely shade of orange, right. Looks like fogdog. Anyway, so you can start overriding the colors that way. This is how you would use JavaScript to interact with CSS, and with HTML for that matter.

[00:02:53]
So, this is where everything kind of comes full circle, where you learned HTML, you learned CSS, you learned JavaScript. That where they meet in the middle is the DOM here, right. So what is document? Document is, basically allows you to reach into your HTML and start messing with stuff, right.

[00:03:13]
So, if we bring this back up. And I open my console. I can say, let's say, let mySquare = document.querySelector('.red-square'). Now, mySquare is this little friend here, right. I had this div that now I have a handle on and I can do mySquare.style.width = 300pixels. And I can make it wider.

[00:04:01]
Or I can make it 100 pixels and it goes back to where it was. This is the fun part in my opinion where, you get to write code that viscerally presents something to you, right. So, querySelector is a newer thing that you can do. I say newer, it's not that new.

[00:04:21]
The old way of doing it was, document.getElementsByClassName. And then, you would say, .red-square. No dot, cuz getElementsByClassName is implied by the class name. Okay, this now gives me a, what's called a node list, which looks like an array, but it's not quite an array, it's annoying. So if I wanted to look at this one in particular, then I would have to say 0, right.

[00:04:55]
And then, that finally would give me the same thing. Again, I just show you that I would use querySelector 100% of the time, it's just way easier to do. You will definitely see documentation that has stuff like this in it. This is the old way, querySelector's the new way.

[00:05:13]
And you're gonna find there's a lot of things in the DOM in particular that are that way, where you'll see two ways to do the exact same thing. And you'll be, which one's the right way? Well, they're both right, [LAUGH]. They both do what you're trying to do.

[00:05:27]
But one's newer and maybe a bit easier to use. This is the thing about the web is they just try not to break it, right. So, instead of deleting things and replacing them with better things, they will leave the old things in and just add new things. So in other words, if it works it works and just stick with it.

[00:05:43]
For the most part, both of those are totally acceptable they're both performance, they both work really well. Just pick one, go with it, it's totally fine. Again, when I was learning how to write code for the browsers, I don't get this, I feel like I'm doing something wrong, right.

[00:06:00]
Because I'm not choosing the right one. You're not, they're both fine, stick with the one that you want. QuerySelector is easier to use, but after that it's up to you. Style object, that's how you start manipulating things directly on the CSS. Maybe you wanna click it so that if they click the dark mode button that you start setting styles with the dark mode theme, you could totally do that.

[00:06:38]
Another good one here, I picked up mySquare, so let's trash this, mySquare. There's another thing called classList. So now, you can see I can see all of the classes that exist on this. It just has the one, right? But let's say I said, classList.add and I added one called, I don't know, lol-class or something like that.

[00:07:03]
Now, if I look at class list, again, what does it have? It now has two classes. If I inspect it, you can see here it has lol-class on it. So this would actually be a better way of doing dark mode, right. If someone clicked your dark mode button, you can go and add dark to all the various different things that change, right.

[00:07:21]
Just by adding classes rather than directly manipulating styles Yeah, by manipulating styles, you're actually just adding inline styles, right. That's why you can see this here. Cool. And we'll go through a bunch of examples like that, but this is just one way we can get started with this.

[00:07:56]
One thing that people find a little weird. When you're referring to this in, let's look at this again. This is background-color in CSS. But you notice in JavaScript, it's backgroundColor, camel cased in JavaScript. Why is that? Because that's the way it is [LAUGH]. There's not really a better explanation than that.

[00:08:24]
CSS, everything is kebab case where they have the dashes between things and it's just always been that way. And that's actually not valid JavaScript, dash is not a valid character to put in a variable name. So they actually have to get around it by camel casing it. If I wanted to refer to the box sizing here, how would I do that?

[00:08:46]
Box and then capital S. And then, this would have to be content-box or something like that. And this would override it to be content-box instead of border-box. So you'll just have to do that conversion in your head from kebab casing to camel casing Yeah, marginBottom, that would be the same thing.

[00:09:14]
Padding-right would become paddingRight, like that. And, yeah, there's a ton of stuff you can do. I was showing you how to manipulate the styles, but you can clone elements, you can create elements on the fly. Let's just see that really quick. So I could say, const myImg = new HTMLImageElement.

[00:09:54]
This I don't remember how to do on the fly. Now I have to do it, anyway. Suffice it to say, I'm not gonna spend too much time digging into it. But you can create HTML tags on the fly, you can set their things and then you could append them to the DOM or you can remove things from the DOM.

[00:10:13]
Maybe we can remove this one really quick just to show you. I'm gonna show you a really fun trick. So if you right click on this and you say, Inspect. And then, if I go over to my console, and I say $0, it'll refer to the last thing I inspected on the DOM.

[00:10:31]
That's very useful to me. So I don't have to go query it. I can just start messing with it. This is just a dev tools trick. And then all of a sudden it's like x. And so, I don't have to keep doing $0. So I think I can do, x., Remove.

[00:10:49]
And I think this will just, oops Just delete it, right. So x.remove, it'll remove itself from the DOM. Which is pretty fun. All right, so there's that. Okay. So, what if you wanted to modify multiple things at a time? Let's say I had this unordered list, which I do right here.

[00:11:18]
And I wanna change some things. But I don't wanna change other things. How would you do that? Well, there's a function called querySelectorAll, querySelector will just find the first instance of something, and then, it just gives you that back, right. So if I have five redSquares, it's just gonna give me the first one if I do querySelector.

[00:11:39]
If I do querySelectorAll, it's gonna give me all of the instances of that particular thing. So I'm gonna say, document.querySelectorAll for js-target. And I'm gonna get this one, this one, I'm not gonna get that one, right. That one doesn't have the class. I will get that one and that one, okay.

[00:12:00]
And I'll say, elementsToChange, right. So, document.querySelectorAll and I'm grabbing .js-target. So, I'm gonna get a list, that's how long? Length four, right. This one, this one, this one, and this one. Then I'm gonna say, for (let i = 0; < elementsToChange.length, i++). And then I'm gonna say, currentElement.innerText = "Modified by JavaScript!" And you can see here it's live, right.

[00:12:31]
So, if I start changing it they're gonna keep changing. Right. Now, what happens if I just change this to be, I'm worried. Yes, this will be fun. If I just change just to be li, not only did I change it, I changed literally everything else on the in my document, right.

[00:13:03]
Because it's queering the whole page, it's not querying just in some particular area. I was too loose with this, so I selected every li in my document. So it did. I could just crash it if I just gave it star [LAUGH]. It just deleted my entire page, right.

[00:13:19]
I don't know, to me this is the payoff for spending a couple hours with me grueling through JavaScript. This is the part where you get to play, right. And playing with code I just think is a lot of fun. So one thing is definitely in MDN. Again, References, Web Developers Guide, I mean there's a ton of these in here.

[00:13:49]
There's a ton of stuff in here about HTML, Elements. So there's a bunch of methods built into the DOM, and we are not even gonna scratch the surface. There's, I'm sure hundreds, right. Basically, anything that you're gonna want to do to the DOM you can definitely achieve with JavaScript.

[00:14:19]
So here, I got my x = $0. So I have this h1 here, right. I can totally say, innerHTML = <em>lololol. And now, I've actually inserted HTML inside of it. Right, cuz I changed not only the text inside of it, I actually changed the inner HTML inside of it.

[00:14:54]
And I put an in there which is, emphasized. All sorts of crazy stuff like that.