Welcome back.
So what if we had more than one element and we had different types of elements, so let's create a main
div and give it an idea of mean.
This is where all of the main action is going to take place.
And we're going to loop through and update select all of the elements contained within the main element.
And this could also have a paragraph as well as it could have a span and any type of element.
So what we want to do is we want to load all of the elements that are contained within a mean and we
want to create a node list with those and all using JavaScript.
So what that's going to do is that's going to build out an element list of all the current available
elements on the page or that are contained within mean.
I'm going to get rid of this console option, the console log messages as we want to clear that up.
So just make sure that they're not there.
Do a quick refresh, do an update.
So everything is still updating and working properly.
But in this case, I want to select any one of these elements that are available so we don't have just
one element that we're always selecting.
So we want to make this more dynamic.
And currently we're selecting the div and we've got more than one div.
So we will potentially have some problems with these elements.
And as stated before, for just selecting the div, then we're automatically selecting that main element
and that's going to represent that first div there that's available on the page.
So let's make this more dynamic and the way that we're going to do that is within the document content
loaded function.
So here we're looping through each one of the available array class values and we're outputting those
and we can also list out all of the elements.
So let's create a main container and this will be our main we can call it node Lyster, or we're going
to contain all of the main node contents so that we can utilize this in any one of the functions.
So it made it global and we can access that globally.
So if we do node Lyster and right now it's undefined, there's no content in it.
So let's select all of the elements that are contained directly within the mean object.
We'll clear this out and I'll do it here within the console first.
So using document the document object query selector, we want to select all of the elements contained
within mean so mean in itself is going to be have an ID so we can select that element with the idea
of Maine.
So we are able to make that selection, but we actually want to select all of the applicable elements.
So we're using query selector all.
And this creates a node list.
As you can see here, it's going to return back a node list and I only have the one node that represents
the div.
So let's fine-tune this in the same way as you would with success.
You can specify that you want to select all of the nodes that are directly under mean.
So if we do add any more dynamically, it's going to list all of those out.
So you can see when we use query selector all we get a node list and we've got each one of the available
nodes in the list is being shown here within the node list.
So let's do the same thing within a code where we're going to bring this selection into the code and
attach it to an object.
And we can call this the node Lyster object.
So this is that one that we created and we can equal that to be equal to that.
So now whenever I refresh and if I output node Lyster, we're going to see we're going to get a listing
of all the available elements on the page that are contained within the mean ID element.
So the same way as we loop through the class list, we can loop through a node list.
So node list isn't exactly an array, but some of the things behave the same way.
So if we want to iterate through a list of them, we could do the same thing as we did here with the
for each loop.
So looping through, we can take the node Lyster and use for each and loop through each one of the current
elements that are available within the node list.
And we can also cancel out each one of those items.
So we can see that now when we refresh, we've got each one of the elements being represented here on
the page.
So the next thing that we want to do is we want to have a dropdown list so the user can actually select
the elements dynamically and then apply these properties to them.
So we're going to do that in the upcoming lesson.
So for now, try query, select for all, select that element main and then select all of the elements
that are directly beneath mean and return that into a global object called Node Lyster.
And then you can loop through node lyster and output.
Each one of those element objects, so they're ready to use and they're in the same state as if we made
the selection with Query Selector as we've attached to that instance of that element in the document
object model.
So that means that we can manipulate it, we can update it, and we can do a whole bunch of really neat
things.
So that is all yet to come in the upcoming lessons.