This lesson, we're going to look at how we can select multiple elements and there's various ways,
just as we saw, when we select individual elements, there's various methods that are available within
JavaScript in order to do that.
So there's get elements by class, tag, name, there's query selector all, and also how you can iterate
the element list looping through each one of the items contained within the list.
So the element method query selector all gives us the ability to select a node list representing a list
of elements matching the specific group of selectors, which are descendants of the element on which
the method is called.
So this is again one of my favorite ones to use, just as query selector, query selector.
All is the one that returns back all of the matching elements.
There's an example of how to use it.
So the syntax is relatively the same, although we're adding in all after queries selector and that's
going to return back a list of all the available elements on the page.
So this is going to be returning back a node list and you can see that query selector selects the one
and query selector all selects all of them.
And this works similar to an array where we've got a length that's of all of the items are contained
within that node list.
So Courey Selector all will return back something that looks like an array and we can use length in
order to determine how many items are available in there and then loop through them and iterate through
all of them.
So of course this lesson also has a challenge and the objective of this challenge is to try the different
methods, try out query selector as well as selecting elements by class name selecting elements by tag
name and then using a for loop or for each loop loop through and output.
All of the items, the elements on the page.
I'll give you a quick sneak peek of the code that we're going to be working with so you can pause the
video at this point and try it for yourself within the editor and I'll show you the solution.
I'll walk you through the solution coming up.
First, create a list of elements so we can call it list.
And using that same format where we've got document, we're going to select elements.
And as you can see, Brackets is giving me a few different options here so we can select elements by
class, name by name, by tag name.
So class name is used quite often as well, and we can select the elements via the class name.
So let's go back into our HTML and we can see that we've got various elements with the class of first.
So how about we select all of the elements with a class of first?
And when I refresh this and if I look at what's contained within the element list, we've got what's
known as an HTML collection.
So this gives us all the elements that match their criteria.
And we also have a link to this particular object.
So if we wanted to, we could type element list and we can return back the length.
Now we know that when we have a link, then that means that we can really easily iterate through all
of the elements that are available.
There's also another one that we can select at by the elements, by TAG.
So let's just use list again and overwriting that original object that we that we selected and this
time we're going to use by tag name.
So selecting all the elements with spane tag and we'll cancel log out Elementalist, save us a little
bit of time from writing.
It can see that we've got an HTML collection and once again we get all the elements with the spane when
we hover over them, when the console you're going to see, they light up at the top there in the browser
and they can open it up and you can see all of the properties of that particular object that we've selected.
And again, ton of information there that's available to us in JavaScript.
Then, of course, my favorite way to select elements to select multiple elements is query selector
all.
And this is the one that I quite honestly use the most.
And this also uses the CSA style syntax so we can select the span's.
In this case, we're returning back a node list.
So this is different than the HTML collection.
Similar.
We also return back the length, but it is defined as a node list so we can loop through them just as
before.
So creating a simple form in the for loop is the one that's always going to work for the different types
of lists, whereas the for each will only work for the node list because we know that just like an array,
the node list is going to start with zero index value and looping through while l'Est is less than l'Est
length and then incrementing ie so that we have a way out of our loop.
So this is one way to get all of the element contents so we can simplify it and get that list.
And using the index value we can return back the values or console log out l so you can see it's going
to list through, it's going to log out all the different elements on separate lines.
You can also update those.
Elements, so while you're iterating through and you've got that element selected as an object, you
can update its text content and there's going to be a little bit more on that coming up in the upcoming
lesson so we can easily update these values.
So how about we do an AI plus one, use rounded brackets to separate out that the value and then we'll
just type in updated and now we can see that it actually updates all those elements.
So we've got update one updated to update it, three, four, five, six, seven.
And if we didn't do the plus one, this is zero base, so we're starting at zero.
So it would have started with zero.
There's also another way to loop through this node list so you can get that element list.
And using JavaScript for each method looping through, you can get the function and as well as element
and you can return back the index value of that element as well.
So if we console log out the index and as we loop through, you're going to see that we get all of those
indexes being returned back.
So that's this one here where we've got zero one, two, three, four, five.
And with the index, we can access the elements within the node list, just as we would with an array.
So there's an option there as well.
And if we want to update the element, text content, because now we've got it within the L object,
we can update the text content just as we did up here.
This is a little bit cleaner way to do this.
And how about we use a template literal in order to do this?
So the rounded curly brackets in order to indicate the index value and then we'll type updated so that
will update that content that's contained.
And then each one of those elements.
And as you can see, when you go into the element list within the Elements tab, you can see all of
these elements are updated.
So we've got all of these span's that have been updated with the new values.
And the nice thing about it is that you can really easily change your selector.
So, for instance, if we were if we comment this one out and this one is going to do the span's as
well, you can see we're actually throwing an error because we're not able to use the for each with
the each HTML list.
So that's something to keep in mind.
So when you are using the get elements by tag name or get elements by class name, keep in mind you
can't use the foreach.
The foreach is only for the node list.
So even though they do look the same, there are subtle differences.
So let's go back into here and let's select the elements with the class of first and we'll make the
updates to those so you can see that we found one there, one there, one there, one there, one there.
And you can do a whole bunch of stuff.
So even as we saw in the last lesson where we can update the element style and background color so we
can set all of the background colours to read if we want, I'll just use single quotes so all of them
get updated to read and it makes it really easy to select those elements and manipulate them.
So go ahead and try this out.
And coming up, I show you a little bit more on element manipulation.
And this is really cool because it gives you so many nice ways to really easily update the visible content
within the page.