Transcript from the "Interacting with a Webpage" Lesson
[00:00:00]
>> Brian Holt: In fact, I should have just shown you this one. This next example, notice we have here some of these have a class of js-target and some of these don't, right? So in some of these, I can say elements to change, I do document.querySelectorAll.js-target. So if I asked for.js-target, which one of these am I gonna get?
[00:00:22]
I'm gonna get this one, that one. I'm not gonna get that. I'll get that one, not this one, and that one. Then here, I pull up the current elements, elementsToChange I, right? This is looking like a normal for loop to us, hopefully. And then here, I'm saying currentElement.InnerText.
[00:00:38]
And I'm setting that to be modified by JavaScript, right? So if you go down here you'll see these ones have been modified by JavaScript, right? But up here it said unchanged,
>> Brian Holt: And then, these ones that say won't change, right, they don't actually end up changing. Make sense?
[00:00:58]
So this is another way that you can do it. You can also do, there is an inner HTML here, as well. And this can be,
>> Brian Holt: We'll put h1 around it, and then, you can actually put h1's in here, as well. And I'll just copy and paste all of that into this.
[00:01:26]
>> Brian Holt: So now, notice that they're massive, right? Cuz it's actually putting h1's in there, as well. Whereas if I did that with inner text, it wouldn't make it an HTML, it would literally put the text h1, which is not in general you want.
>> Brian Holt: So that's in general how you're gonna be interacting with the DOM.
[00:01:44]
And anything that you can think about in terms of these DOM tags you can change, right? You can change the source of images. You can change the attributes. You can change what the tags are. You can remove HTML, you can add HTML. All of that stuff is available to you.
[00:02:02]
>> Brian Holt: Or like another thing I could do in here, if I come in and say, let's say I inspect element on this. So now I have y = $0. So now I have access to this,
>> Brian Holt: Thing right here, I can say y.classList. So if I look at that, it's gonna be a list of all the classes that are on it, which it doesn't have any classes, right?
[00:02:33]
Cuz I changed this to be an ID. So let's try that again. Let's make that a class. And now, dot, okay. So Inspect element, Console and,
>> Brian Holt: Okay. So now I have the red square, right, this one right there. It's convenient that if you mouse over it then it highlights over here in the browser, right?
[00:03:00]
y.classList. So here I can see that it has one class on it, which is the red-square, right, which corresponds to this one. I can say y, let's trash this. And so y.classList. You can add, so I can say add some other, or let's do this. Some other class.
[00:03:29]
So now, if I Inspect Elements on this, you can see here that I've added some other class. You can see that right there. Or I can say, remove,
>> Brian Holt: red-square, now if I remove red-square, what's gonna happen?
>> Speaker 2: It's gonna blow up everything else.
>> Brian Holt: Yeah, so it's gonna go away, right?
[00:03:55]
Because all of its style it was getting it from red-square, right? So it disappears. It's still there, the div is still there, right? But it has no width, it has no height and it has no color, which is why it disappeared. But if I come back in here and say, y.classList.add, what's gonna happen?
[00:04:13]
It's gonna reappear. So this is something really, really cool and powerful. And actually, probably what you will end up doing quite frequently with JavaScript interacting with HTML, is adding and subtracting classes, right? So as you might imagine, I might write up here, something like hidden,
>> Brian Holt: Display none, right?
[00:04:41]
Now if I say y.
>> Brian Holt: Hold on, let's make sure that this is not the same one. So let's y = document.getElement, or let's do QuerySelector. QuerySelector red-square.
>> Brian Holt: So now that should be that, okay? Now if I say y.classList.add hidden. You can probably guess what this is gonna do, but it's gonna hide it, right?
[00:05:18]
So now it has both this one, and this class, but hidden has a display none, so it disappears, right? And I can come back in here and say, y.classList.remove hidden, and probably a spoiler alert, it's gonna come back, right? In fact, for your project today, you're gonna be doing that quite frequently, so good luck.
[00:05:44]
>> Speaker 2: Why doesn't document.classList work to get all the classes and a document?
>> Brian Holt: Document.classList? Cuz it was never defined to do that. [LAUGH] So the document itself, it refers to basically the whole HTML document. It's not even necessarily referring to a specific node, right?
>> Speaker 2: What do you mean?
[00:06:09]
>> Brian Holt: So like this h1 right here, this is an h1, an h2 actually, an h2 node, right? So it's one individual like element on the page, right? Document doesn't refer to one particular element. However, if you want that there is document.body and that does refer to the whole body, right?
[00:06:28]
And so, that will have a classList, which right now the body has nothing on it. The body will never have any classes on it but it does technically exist.
>> Speaker 2: So this isn't like the cascading is the right term? Cuz I would expect that to give me all of the classes in any element within the body.
[00:06:47]
>> Brian Holt: So if within the classes that are children of it?
>> Speaker 2: Yeah.
>> Brian Holt: No, it is just that particular one. So if you want that, you're gonna have to read, some sort of algorithms can be document.body.children. And you're gonna have to go through all of those children, right?
[00:07:05]
And this is gonna give you back a bunch of all of these, right? And you're gonna have to go into their children, and into their children and recursively grab all of those classes.
>> Speaker 2: So if I wanna know what classes are in an entire document, I should just look at the HTML?
[00:07:20]
>> Brian Holt: Probably, yeah. Or if you're looking for one specifically, you can just do document.QuerySelector, right?
>> Brian Holt: Just say I'm looking for all of the h2's, right? Right. And they may not be siblings of each other. But you can get all of them.
>> Speaker 2: And I can get those because h2's are direct children of the document?
[00:07:45]
>> Brian Holt: Yep, and so, if I wanted to say,
>> Brian Holt: This one's gonna have children, these ones. So if I Inspect Element on this,
>> Brian Holt: js-target. No, that's not the one I want.
>> Brian Holt: So let's say I only wanna get inside of these blocks right here, which are called clips result.
[00:08:11]
So I can say document.QuerySelector.clipsresult. And then I can do a QuerySelector again, to get everything that's inside of it.
>> Brian Holt: I think these are h1, aren't they?
>> Brian Holt: I need all on both of these.
>> Brian Holt: And then I'd have to loop through them. In any case, you can scope them to in particular ones by using not necessarily QuerySelector on document.
[00:08:50]
But you can use it on the individual elements, as well. And it will be scoped to only find elements inside of that element. Does that make sense?
>> Speaker 2: Mm-hm.
>> Brian Holt: Cool. Other questions?
>> Speaker 3: Is it normal to have more than one class on a tag?
>> Brian Holt: Very, it's very normal.
[00:09:10]
You won't have more than one ID, but you'll often have, I wouldn't say more than five. If you're getting beyond five you probably have a problem, [LAUGH] in general. I guess there are reasons to do it, but I'd say one to three is very normal. Good question.