Welcome back, my friends, to another lecture today, what we're going to do is we are going to create
a multiple query selectors.
We're not going to create we're going to learn a lot about them because last lecture.
So if you haven't watched that, please go back, check this out, check out that lecture.
And so it's about single query selector where we get the elements using the git element by idea.
And after that we use the query select, which is more modern and widely used.
Now, I took the liberty of creating the app to G.S. file and just link it here.
Now in my dodgiest file, it's empty.
You should do that right here in this folder.
Right?
So I'm glad that we are done that.
Now, let's continue here.
I'm going to refresh I'm going to open the console.
So today our lecture is about what?
About how we can get multiple elements.
Right.
In that we can achieve in one go.
So how we can get multiple elements from our DOM in one go so we can achieve that by get elements and
get elements by class.
Now, remember, remember last time I was happening?
Remember last time I've told you that we're going to do this, so I'm going to create a variable here,
spane items.
Why did this happen?
Because if you go here, if you go inside a you inside elai, I do have this spane items, spane items
in every ally.
So I have one two.
I have four or five x four.
So to do or every spend element, there is a title inside.
And so writing inside and we do have to do list element title.
That's the class.
OK, so we get now our our variable is spane items means that we going to grab multiple items, not
just one.
Now how are we going to do this.
So spell items equal to document the get element by class name.
How cool is this.
And we need to pass these class name that super long.
So I'm going to copy it because I'm going to make a mistake and you're going to laugh at me.
And that's what I don't want to do.
Now, how cool is this?
So if I cancel, like, I'm just going to say Girlyman by class name like this.
And I'm just going to give you the space here, and I'm going to say concatenate this one with spane
items, because I just want you to know what's happening here.
So it get me the collection right now.
We can do so if we want, for example.
So what we can do, we can access this.
So if we want to access any of the elements, we can do because it's a collection.
Remember, it's not an array, but it's still we can use we can cancel lock, which is going to show
it to you.
We can call log spane items of the position zero and let's see what's happening.
So when I do this, what you expect to happen.
So it will give me this.
I cover it.
It will give me the first one.
Now we can.
We can.
Same as before.
We can do a lot.
So now this because returns collection return for actually here.
Now I'm just going to access number one, number two and number three.
And that's it.
So if I do number four, it will give me an error you want to see.
So if I do number four, because I don't have it number four here.
So it's going to say undefined.
So that is just for show.
Now, what we can do, we not just we able to grab them, but we can apply all of the styles that we
want, for example.
I just want to have this one.
We have a style and background, not this style Savani background.
And I'm just going to put a background as, I don't know, red.
So last one will have a different back in this.
By the way, it's not from here until here because we are just having the background for the last spark
right now.
We can just also use change the color.
You know, we can add the text, for example, in this one.
OK.
Text content.
We can change the content of the text and say this.
This is coming from.
From Get Element by Plassnik.
Very good.
Now let's see if this is changed.
How cool is this?
So that's pretty much what I want to show you.
And the thing is that we have here four elements.
But what will happen, for example, if we like to only show because we just used to get elements of
a class name.
Now, if I have if I have another spin outside these unordered list and let's put it here.
So after this div, I copy it and I put it here.
Now look what happened.
Nothing will happen here, actually.
And by the way, why it's not showing me how many elements I do have stretch now.
Let's see if I'm coming this party here.
It's showing me that the last one that I put it there, so here it is, it's printed here and it's there.
This is why this is happening, because we're trying to find all of the elements with this class name.
We not just specifying, OK, go in and order, at least in GRAP and why it's like this and grab.
I'm just going to make it better so and grab everything that is that unordered release, but we can
do that and I'm going to show you how now, because they put it outside of this scope.
That's called a scope here.
So this is actually like getting here globally.
So we searching the entire damn Sujiatun document and we grabbing.
But what if I want this to be fixed to this up here, by the way.
This is the U.S., right?
If you don't know it, this is where is it?
This is the entire ULC.
The square with the purple, yeah, the purple square or rectangle, yeah, that's the that's the U.S..
So how we can do that.
So if I want to specify only to do get the elements there, I can do that.
And by the way, so what we can do, I'm just going to change here.
A couple of things.
I'm just going to go here.
So now this will get all the elements for the class name, and I'm just going to copy it.
So we're going to use it.
But this will get all the elements for the class name.
An entire document is specific, it's.
Specific.
I can't be bothered with that.
Yeah, nice.
So the specific scope will be what you think the specific scope will be you items.
I'm going to create a variable call or let's put it the variable here and declare it, you know, items
like that.
And I just want I just want this one.
I copy it and put it here, but I want to change this to other items so the other items will have not
this document get Elliman by class name, but it will have a query selector.
Remember, we've done this before.
So the query selector, we will say, OK, grab me the all the you will everything what you have there.
And I'm just going to specify get elements by the class name and I'm going to paste the class name.
Now this so comes a lot.
Other items now, you're not going to be able to see it here, but now here he is, the collection should
be same as here, but I don't know what's happening now.
See, the length is four.
And this one, by the way, the length is three.
I mean, he's five, right?
Because we do have one element inside.
Now, you find one here to do console lock.
And if I want to access the number one, I can achieve that with zero.
Right?
No problem.
So it's going to print out this here.
Here it is.
Let's just add something here.
Local scope.
So we are accessing a locally here, yet local school, and here is why it's giving me that error rate,
because I'm trying to get it here like this.
Now I know what was the error?
So I learned something.
Now we do have this HMO collection with length five, and I do have this HMO collection with length
of four right now.
So if I try to access the collection of four, it will give me undefined because this is outside my
scope, right?
This is outside my scope.
So I can do all of the same things here with this, but I'm not going to bother and I'm not gonna bother
you to do it like that.
So I hope I'm clear this.
I'm going to show I'm going to explain one more time.
So we are getting elements by the class name in that will actually search the entire document and it
will collect everything that is with this class name.
Doesn't matter if it's inside you.
Well, in order at least or outside, it will get it.
So that's globally, that's global school.
The entire document.
Global scope.
Right.
It's too long, but you need to know it.
This is a locally.
So I'm saying, OK, get the query selector for the USA in inside, get these elements by the class
name.
So that is why I can't access this one, because I'm saying, OK, everything that is here, I just
from there to there, nothing else.
I don't want this one by the way.
I don't want that one as well.
That was just for showing so you can comment that one in your lecture.
But I'm going to delete it.
Right.
That's what you need to do now.
So I've shown you one and I we have a couple of more to do to actually more.
Now, for example, this is I'm just going to refresh again, and this is HTML collection.
So the e-mail collection, we can do a for loop here.
We know how to do a photo, but the thing is that it's going to be very cool if we have a way how to
do this to make it to a rate.
OK, now convert HDMI collection to array.
How cool will that.
So it's actually very, very simple.
So where we're going to say span array because I'm going to get this many items.
That's why I call the span array and I'm going to say, OK, array from here and I need to specify the
collection and that's it.
So console lock spanner and that not items actually.
Sorry guys.
So Spanaway should give me a rate.
Not like here.
XtremIO collection should be array.
Here it is.
So we do array zero one, two, three and four.
Very cool.
So I can do a lot of things with this battery.
For example, I can get the class name, I can change something here.
And by the way, we can also access the same way we did it this year, for example, the number one.
And if I print it out, it will be there.
And here it is.
This is coming from the array, by the way, because there is here and this one is here, the number
one zero one, two and three.
OK, now what we can do, we can do a for loop here in the for loop is Yeah.
Let's do a for loop.
So for I'm going to say for I equals to zero I is less than span array length.
Remember we can just grab it the length like that in I plus plus we need to increment this counter in
here.
OK, so here I was Spanaway I'm going to say that you should see and style background to blue.
I don't know, hexadecimal belli for blue.
That's why I'm doing this.
So I expect this, I expect this to work.
Right.
Let's see what's happening now.
It's not working because Spanaway style we should put it like so we need to access each individual.
This is like splintery of zero.
So it will loop a couple of times.
Here it is now.
It's working right now.
It's working also strange behavior.
Is that so when I when I hover it.
Yeah.
Nice.
So we know that is working, but you need to put it here because this will be span, span, array of
zero next cycle.
It will be span array of one and things like that.
That's why we are we are able to do this.
How cool is this.
Now that is for the first part.
Now for the second part, let's get the Elida light elements so we just get the well.
We just get get this ally element, because in I we do have to do list element, right.
And we do have to do the to do list element title and we have trash inside each and every ally.
So we're going to do something else here.
But the way we're going to do it is first time we're going to comment.
This one I'm going to refresh here.
I just don't want any anything there.
And the second way is to get to get inside the elai with tax.
Now, how we can do this, OK, war ally tax.
And I'm going to say, OK, document.
They are very similar, by the way.
Guys get element by tag, name and the tag name.
What you think I will put it here, Ally.
So I'm just going to cons a lot.
I like that.
Let's see.
What's happening in here is I got the same like HMO collection of elai to do list element.
How cool is this.
And we can just go like this.
We can still access it.
We can still access each individual element.
OK, now, for example, we can access the number two or number three, same way number two number through
to give me the number three.
So if I go here, here it is.
If I go here, it will select the other one.
And what else we need we can do here.
Now we can Pantex if we want to, for example, one and see, OK, text content and you need to write
some descriptive content here.
Updated with that name.
How cool is this updated with that name.
Here it is.
Right.
And what else we need to do, we need to do for example, I'm trying to think to give you one more thing
and that one more thing will be.
So this is number two.
The number three will be worth the number three will be.
I'm just going to copy it from here and I'm going to change it.
Number three is get so we're going to use all selecter, right?
So example of this will be number three and it will be an example of query selecter.
Oh, no, maybe it's a good idea.
Not bad idea to put it in the a lot.
So you should do it like this everywhere, you know, missing Querrey, right.
So if I refresh, I should have seen that one query selector, also query selector all they're all similar,
but you will see what will happen.
The query selector all.
I'm just going to say, OK, I'm just gonna comment this one and I'm going to name it Ueli items.
So you guessed it, I just want to select the U.S., I mean, the all of the line items, Duckman,
get elements.
So here I'm just going to remove this one unless equerry selecter all.
And I'm just going to say, OK, Elai, now let's see what's happening.
Let's refresh here is now, instead of a collection, we have Notley's with the full length of four.
Now what is powerful with the Notley's, we don't have to convert it error.
We can straight use it.
So this step is keeping this step where it is.
No idea of where I put the step.
Yeah.
That this step is skipping this step because it's not it's Notari.
It's not HDMI collection.
No, we can do this.
Do it for let's see what's what's holding there for I equals to zero.
I will be smaller than other items and still we can access the link property here and I plus plus we
need to increase the selector.
No other items.
Let's change the background to each and every other item.
So style background.
And I need this one to be yellow.
I don't know how it will turn out.
It is ok actually can't see it.
It looks like the entire block this but actually it's not the entire block because we don't have any
margin, we don't have any padding, we don't have anything.
Now just going to copy this line and you will be able to see.
So I'm just going to add margin here and at margin of ten or fifteen pixels.
Doesn't matter how much it is now.
You see that I'm accessing each and every individual ally inside our unordered list.
How cool is this?
Also, let's change a color of
all the font and I'm going to put it blue.
We're going to save it.
I'm going to refresh.
Let's put it red.
Oops.
Red, because we do have a need.
Yeah, that's Luke's way better now you know how to do all of this, right?
So what else?
That's it.
We don't need this pork.
Now, you know how to get multiple elements using good elements by the class name.
So if you do want a global scope, you can do it like this if you want to locally, that all of the
elements inside the U.S., you can do it like this.
Now, you know how to do that.
Now, also, you can get by their attacks in the same thing can apply.
Also, we learn how to for a loop.
There is a foreach actually, but we haven't covered that.
I'm not going to show it to you now.
And actually, we can convert the HDMI collection to an array using this array that form in the last
one is a query selector.
So in this square, selectively selecting all of the allies, we just putting in the variable you items.
Now the thing is that how powerful is this is this will return to Notwist in Notley's of length for.
So there are four elements inside the receiver.
However, each and every one in there is going there.
Right.
And you can actually see what's happening inside.
Right.
You can just be more productive and see what is there and yeah.
Be more.
How do I say more like investigators find things now please.
Like the video share subscribe put a five star review.
I'm just joking but I'll read you whatever you want.
But it will mean if you it will mean a lot if you.
Yeah.
If you like my content.
So thank you very much.
We learn a single selector now we learn a multiple selectors and here we will see what we'll do next.
Take care and I'll see you next time.