Welcome back.
In this video we're going to spend time talking about the different ways of selecting elements using
javascript and the doll.
Before we talk about the actual selectors we need to just review the document one more time.
Remember that our entire dorm all the objects all the representations of our elements all live inside
of this document object.
It's the top level object or the root node.
So quickly let's open up any browser window.
I'm going to use Google and let's try typing these four lines.
So open up the console and type document dot you are l and it shows us the URL of the page that we're
on.
You can do document dot links and that's a whole list of every single link on the page.
Every single anchor tag we can do document that Vadi and this is the entire body with every other element
inside of it that lives in the body and we can do document dot head.
So we've already seen this in the last few videos.
The reason that I'm showing it to you again is that all of the selectors all the methods we're going
to learn also live inside the document.
So everything we learn about in this video is going to start with document dot something.
So I'll show you what those somethings are.
There are five main methods we're going to talk about in this video.
They're all built into the document.
They all start with document dot.
You can see them here get element by id get elements by class name get elements by tag name queery selector
and queery selector.
All if you can think back to the video I did on adding methods to an object where we could basically
store a function as a value instead of an object.
We had like cat space in dog space and we had to speak method that we added into our dog space object
.
That's exactly what's happening here.
These five methods have all been added in to the document object.
So before we actually get started here I want to show you the H-G mail that I'm going to use for demonstration
purposes.
It's a very very simple page just has a few elements.
So our normal head is pretty much empty aside from a title or body.
And then inside the body to H-1 is one that says hello.
Another that says goodbye.
And then three allies instead of a UL and those three allies list item one two and three are slightly
different.
The first one has an ID highlight and the last to have a class called bolded.
So we're going to use that.
The fact that some of them are H-1 some of the elements are allies.
Some have classes.
One has an ID.
We're going to use those different properties to select them in different ways and different combinations
.
So I'm using this same code here in the examples and I'm drawing a green box so you can see in the next
few slides.
A green box around whatever is selected.
OK so let's get started with the first method.
Get element by ID.
So its name is a little bit self-explanatory.
It takes in an ID name and it's going to return the one element that matches that ID.
Remember that an ID can only occur one time on a page.
So here's an example document diked get element by ID.
Highlight is going to select this ally that has Id highlight so it selects the object and then it returns
to us.
I'll quickly show that in the council.
So we'll open up the console to a document type get element by id
highlight which is our ID name.
Let's save it to a variable called tag.
Hit enter.
And let's look at TAG.
And you can see it gives us the first line that has ID equal to highlight.
So we selected something by an ID.
Again it is showing it to us as if it's actually aged him well but the result of this is actually a
javascript object.
So we can do that canceled that Diyar again on tag.
And this is actually what it looks like.
All these properties.
So this is just a nice shortcut for us to visually see what we selected but in actuality it's an object
representation.
All right so that's all there is to get element by ID.
We call the method we pass in a single string argument the name of an ID that we want and then it goes
and finds the matching element that has the same ID and it returns the object representation to us.
The next one is get elements by class name so its name tells you exactly what it does.
Just like get element by ID.
Although this is slightly different Get elements plural with an S by class name.
Remember a class can occur as many times as we want on a page.
So we pass in a string like bolded and that's going to return a list of all the elements on the page
that have the matching class name bolded.
In this case there's two of them but if there were ten thousand elements on the page that had that class
we would get all 10000 in a list.
So let's go demonstrate this so will rate document get element by class name and you can see if we get
this little autocomplete here so we can select the one that we want get elements by class name and then
the class name we want is bolded.
Let's save it to a variable.
Tags not tag but tags because we're going to get multiple tags back if we look at what tags is.
It's a list of two lies both with class equal to bolded.
Technically it's not an array.
It's something called a node list which is array like.
I like to think of it as a lightweight array.
So it comes with some of the things that you would expect from an array.
But some of the more advanced features are actually missing.
So for instance we can access elements like this using an index tags 0.
We can do tags to outflank but we can't do a for each loop tags dot for each.
And if I just do this it's going to tell me tags are for each.
It's not a function.
So that's because there is no foreach defined for these node lists that's defined for arrays and these
aren't arrays.
And just like with get element by id it shows us this nice string representation but behind the scenes
it's actually an object.
So again just to prove that to you console dot DIR and we do tag's zero.
And it actually is this big complex crazy object with tons of properties.
OK so let's get elements by class name.
It returns a list.
Not quite an array.
And it contains every element on the page that matches the given class name that we provided.
Next up we have get elements by tagged name.
So this one works just like get element by ID or get elements by class name.
Except it returns a list of elements that match a given tag name like Ally or H-1.
So in this case I'm running document dight get elements by tag name Alhaj that's going to return to
me a list of the three allies that exist on this page.
So again let's demonstrate that var tags equals document that get elements by tag name and let's do
Alhaj first and let's look at tags and we get this list also not quite an array it's a node list that
has three allies and I won't prove it to you this time.
I went to the Consul that DJR.
But these are objects they're not just strings or not.
H tim l they're actually javascript objects with all those properties.
So I can do the same thing for H-1.
So we'll select all h ones and we look at tags and we get to h ones and the list.
It's not just limited to tags that we see inside the body.
I could also do something like this.
Get elements by tag name body and it is going to return to me a list with one element the body inside
of it.
Or I could also do it for the head or the time element or title or whatever I want but the important
part is that it returns a list even if there's only one element it still returns a list.
So to select the body we could do something like var body ECOs document that get elements by tag name
body and then just take the first item because there's only one item in that list.
And if we look at what body is we get this giant object that the entire body.
OK.
So that's Get elements by tag name.
Just to reiterate you give it a tag name like Ally.
It goes and finds all the elements that match it and returns them all to you in a list.
Even if there's only one.
So here I have another example doing it with an H-1.
You can see that it selects the two H once.
Ok so now we change gears a little bit.
We no longer have a get element or get elements by something syntax.
This is called queery selector and query selector is a newer method that hasn't existed for all that
long.
That really makes our lives a lot easier.
So we actually can use it to do everything that we saw with get element by id get elements by class
name get elements with tag name we can replicate all of that with queries selector.
So what it does is it takes a CSSA style selector.
So a CSSA style selector means just any of the selectors we would use instead of a CSSA document.
So in this example I'm selecting something based off of the ID highlight so I can't just write the word
highlight like I did with get element by ID but I have to do is use the CSSA syntax with the hash symbol
or the Octa Thorpe and then highlight.
So this is how you select something with query selector.
If you want an ID just like you would with C Ss and we get this first ally with ID equal to highlight
.
Before I go over to the console and type this out I'll show you we can do the same thing with a class
name var tag equals document that queery selector dot folded which is how we would select the bolded
class using C Ss.
And what's important is that it actually only gives us the very first match.
So even though there are two elements that have bolded as class it only gives us the first one and that's
the point of selector.
It always just returns one element there is another method we'll see shortly that will return all elements
that match.
So a query selector can also take in a tag name like we have here.
H-1 and it returns the very first H-1.
So we can take CSSA selectors that we write all the time and see SS and we can use that syntax to select
elements with queries selector.
So I'll demonstrate that here.
Let me clear this out and let's select this first.
H-1.
So all I need to do.
Var H-1 equals document query selector
H-1.
And if we look at what H1 is again it's a nice string representation but it's actually an object that
represents this entire element.
So next up let's try selecting based off of an ID.
So I'm just going to copy this line rather than H-1.
This will be an ally and rather than selecting the first H-1 will select the first item that has the
ID highlight.
And of course there's only one item because it's an ID of course it's only one item that has this idea
on a page and we need this.
Octa Thorgeir.
Otherwise it's going to look for a tag name called highlight which doesn't exist and H.J. him out.
And if I hit enter and look at Alhaj I get that first ally with list item one ID equals highlight.
Lastly let's do the same thing with a class.
So I use the CSSA Leichter dot folded which is how we select a class and if we look at Ally I get the
second ally with class equal bulleted list item 2.
So there are other things that we can select.
It's not just based off of a tag name or an ID or a class.
Those are the most common but we could do other things like this which won't work on my page but I could
select all anchor tags inside of an ally with a class of special.
And this is a longer C Ss selector but it's valid in the US.
So all the anchor tags have class special that are nested inside of an ally and that's totally valid
.
Again I don't have this set up on my page.
So if I hit Enter just going to give me.
No because it didn't find any matches.
So as I mentioned Querrey selector returns the first match and that's it.
Sometimes it's useful for instance if you wanted to select the body.
All I have to do is say query selector body and that gives you the body unlike when I did document diked
get elements by tag name body.
They gave me a list and then they had to ask for the first element.
If I use queries selector I'll just get the body right away.
But the alternative is queery selector all.
So it works exactly the same way.
It takes a C a set selector but it returns all matching elements.
So in this case I'm using document that query selector all H-1 returns both h once or in this case I'm
using the class bolded.
So CSSA style.
I need dot bolded and that gives me both elements with the class equal bolded.
So let's demonstrate that in the con..
Let's select all allies so far.
Allies equals document that query selector.
All ally.
And that will give me all of them.
I look at allies.
You can see it has three allies.
One last time I know I'm a broken record.
These are objects.
They are not HMO.
They are javascript objects that are constructed from the HMO.
And if I do the same thing but I do it instead with query selector and I hit enter.
If I look at allies it's not a list it's only one.
So same thing if I did it for a class.
So let's do it for the bolded class.
We'll just call it bolded and have you document that query selector dot bolded.
And I look at that it's just the first item list item too.
And if I do query selector all
I then get a list with both of them in there.
One point of confusion often for my students is that you can still use queries selector all even if
there's only one element you're looking for.
So you could do something like var ally equals document dot query selector.
All of an ID like highlight and I look at Ally and it's a list with one item.
It's just pretty rare that you would do that but it will still work if there's only one match.
All right so we covered a lot of ground in this video.
So let's go back to the beginning and do a really quick wrap up.
We started out by talking about how all of these methods are inside of the document object we can select
by ID with get element by ID we can select by class name with get elements by class name and that returns
a list which isn't actually an array.
It's called a node list.
We can do the same thing but using GET elements by tag name which will also return a node list based
off of an element type that we select by then we have query selector which is a jack of all trades.
It returns the first element that matches a given CSSA selector.
So we can use it to do everything that get element by id class name and tag name did we can give it
an ID like we do here in a class like we do here or an element name.
And then there's query selector all which works the same way except it returns a list which is not an
array.
It's also a node burst with all elements that match a given selector.
All right.
So next up I'm going to have you do a really quick exercise