Interacting with the DOM

[00:00:00]
>> Brian Holt: Let's start just doing some basic interactions here with the DOM. So, ignoring the script tag down here, you have this red square right here, right? And, that Red Square corresponds to this red square class right there. So, given that the background color is crimson here, what would you expect the color of this div to be?

[00:00:23]
Should be crimson, right?
>> Brian Holt: But it's green, and the reason being is down here you see const redSquare = document.querySelector.red-square. That's getting like a handle now so this red square variable represents that DOM node, right? And, when I say node, I'm just talking about some tag on the page, right?

[00:00:45]
In this case, that's a div. Okay, so now I say RedSquare.style.background color equals lime green. Okay, and I can put blue in there. Except this doesn't refresh super well. But, suffice to say that that's why its lime green now. So,JavaScript can overwrite CSS. In fact, if you look at this inspect element turn here, you can see here it's actually putting the style in line right here

[00:01:22]
>> Brian Holt: And, that's why it has more specificity, it's more specific than the CSS.
>> Brian Holt: And, that's why you can see here if I go up here where,
>> Brian Holt: If I turn that off, then it goes back to red. Goes back on.
>> Brian Holt: So, that's pretty cool, right? This allows us now using JavaScript we can interact with our HTML documents.

[00:01:49]
We can change style, we can change all that kind of stuff. So, notice that background color here is Kebab case up here as it's called. And down here, it is Camel case. So, here we're using dashes between the background dash color and here when we you're doing RedSquare.style this is gonna be Camel case.

[00:02:09]
So, you can just assume that padding right is gonna be padding capital R right, right, so that's something to keep in mind and here, let's talk about this for a second Document.QuerySelector (*red-square'). Okay. So, document represents the DOM, right. So, there's a bunch of API's on here for interacting with the DOM.

[00:02:33]
We're using one here called query selector. And, what query selector is gonna do is we're going to give it some sort of CSS selector right here, and it's gonna go find just the first instance that it has. So, if I have nine red squares here, it's only gonna grab the first one.

[00:02:49]
It's not gonna grab all of them. If I wanted all of them, I can put query selector all here. And, now this is gonna be red squares. This is actually gonna be a list. Of red squares. Okay, so that's the difference between query selector and query selector all.

[00:03:10]
>> Brian Holt: Notice that there's a little period right there, this should look familiar to you, right? This looks like a CSS selector. That's because it is. [LAUGH] And, that's how you're gonna grab ahold of that. If this was an ID over here, ID equals Red Square.
>> Brian Holt: Work the same way as well, right?

[00:03:32]
>> Brian Holt: Now there's a bunch of ways you can do this. There's also, if this is an ID, you can also do get element by ID and then you wouldn't have the pound sign there, this works as well.
>> Brian Holt: Query selector is quite new. It's maybe five years old, which is new in terms of JavaScript get element by the get tagged, get elements by tag name.

[00:04:01]
There's a bunch of those that are older they work just as well. These are just a little bit more modern.
>> Brian Holt: So, in other words, feel free to use both. There's no reason that you can't use either one of them. It's not, this is not frowned on using get element by ID so either works.

[00:04:18]
So now I have red square here. Make that a little bit bigger for you. Red square dot, let's say style.border. Let's say border = 5pixels solid, and you can pick your favorite CSS color. My favorite is Peru. I don't know if you knew this, but Peru is a color.

[00:04:40]
And, that's what color it is. It's a nice shade of orangish yellow, kind of pukish a little bit, but who's counting?
>> Brian Holt: But I mean that could be anything, right? This could be blue. But notice it's changing colors down there, right? And you can absolutely do that from the console as well.

[00:05:02]
Nice little life hack here. If I right click on this and say, Inspect Element right here. Okay. So, now it's highlighted right there, right? I can come back to my console and say $0. And, that's gonna refer to whatever I have selected in my Inspector so it's nice if you wanna be able to like manipulate that and say $0.style.

[00:05:33]
let's change the width to 100%. So, that works as well.
>> Speaker 2: So now, if you inspect something else would that other thing immediately change to width a 100%?
>> Brian Holt: No.
>> Speaker 2: Or would you have to.
>> Brian Holt: Now $0 would refer to that, but you'd have to run it again in order for that to happen.