Transcript from the "The DOM" Lesson
[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: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: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: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: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.