In the previous lesson, we saw how we can use Query Selector to make a selection of an element and
then make use of that element within our JavaScript.
This lesson, we're going to look deeper into Querrey Selecter as well as Querrey Selecter, all when
we were making our selection, we were selecting via the button tag.
And if we had two buttons, so if we had tip number one.
And tip number two, so the buttons both are button tags and there's no other way to identify them than
the order that they're being represented on the page.
So we've got tip number one, which we're using our JavaScript and transforming it to.
Hello.
And then tip number two, we don't actually see that we transformed it.
And that's because we're using query selector.
And what query selector does is it selects the first element of the page that matches that specified
selector group or group of selections.
So if none is found, then you're going to get null return.
So essentially this is the syntax that we're using.
And there's some also some additional examples that the Mozilla developer network about how you can
make that selection.
And as you can see, that this is a selection within that same format where we're using ID, we can
use classes as well as the tag names in order to make the selection.
And all it does is return back the matching tag.
That is the first element that it finds within the page.
Here's an example of how it's using class.
And then here we're using query selector with a more complex selector.
And this is similar to what you're going to find within success in order to make the selection process.
If we want to select more than one element on the page that we can use, query selector all.
So this returns back a node list representing all of the document elements that match that selection.
So if, for instance, we had more than one element that we were selecting, we'll go back here and
we're going to transform this and update this to query selector all go and refresh our page.
We see that what's being returned over here is a node list.
We've got a number of different elements on the page.
And even if we only had one, we would only we would still be returning back within a node list, except
we'd have a list length of one.
And we can see that in our HTML is set to hello.
But we're not specific on which element we're actually trying to select.
And as Button has more than one item within the node list, it simply puts the inner turmoil to hello
within the object of the node list.
And we don't actually affect the actual elements that are on page.
If we want to be more specific, we have to specify which element we want to select.
We can do it within the same array type format where we select the node list starting at zero index
and if we select the second one, it would be bracket one.
So this would be selecting the second element responding.
If we want to update that inner HTML, we could select it within this type of format.
We also have the option because it's within an array type format that we can loop through the elements
and update them and we'll show you more on that in the upcoming lessons.
But for now, we only have the one button and we are going to be using query selector.
So go ahead and try this out for yourself and create a simple exercise where you're selecting you've
got more than one element that you're selecting and you still want to select the first one.
So try using query selector all.
And of course, if you only have the one element then you would be using query selector not query selector
all.
But go ahead and try this out.
In the next lesson, we're going to continue to build out our project.