- [Instructor] In tutorials and code examples,
and even live code you will often find two
other methods used to access elements,
getelementsbyClassName and getelementbyId.
Notes that get elements by class name has the plural
of elements whereas the by id one has
the singular of element.
These two methods used to be the only tools we had
for accessing elements using classes and ids
and they still work, but queryselector
and queryselectorall were introduced to simplify
this process and remedy some of the shortcomings
of these older methods.
That said they still work fine they're just falling out
of favor because the queryselector method work better
and easier.
Lets look at how these older methods work,
getelementsbyClassName returns an array-like object
of all the nodes or child elements matching the query.
The query is string of space separated class names.
Looking at the exercise file for this moving
you will see I have added the packprop class
to some of the list items in our list.
We can now use getelementsbyClassName
to find only those elements.
To do that open the console,
target the document object cause that gives us everything
in the document and then we say getelementsbyClassName
and then we pass in the class name we are looking for
packprops,
I mean packprop there we go.
Here now we get an htmlcollection of elements,
now an htmlcollection is similar to the node list
we got with queryselectorall and it works pretty much
the same way it just that this is an older way
of doing things,
the browser is returning an older type of object back to us
we can still use the foreach loop to loop through these
and we can still do all the other things,
so it's effectively the same thing
just in a different method.
Okay, so this query gave us all the items,
now let's say I want to get only a specific item
that has both this class and another class.
Lets look back and say maybe we want the one
that also has backpack color
so I will say packprop backpack color, I will go back
into my console hit the up arrow to just get my old query
and then I will paste and this two class names instead,
what we get in return now is the same an htmlcollection
only now there is only one item and that is the item
that has that specific combination of classes.
So using getelementsbyClassName
we can get a single element
but we get a return as an array and then we have
to iterate through that array to get to the single element.
Say document
getelementsbyId
and pass in the name of that id
hit return and we get the document object
this time of the id.
Now that you see how these works you will also notice
in older code, developers often used ids specifically
to be able to target objects like this because like I said
we used to only have these two methods
and the class method gives us an htmlcollection
that we then have to work with further to get to the object
that means in some older code
you will find html documents are full of ids simply so
that we can target them using this particular method
but now that we have the queryselector
and queryselectorall methods we no longer need to comply
with the restrictions of these two methods and we can do
whatever we want using C S S query
instead which is why we use queryselector
and why these two older methods are relegated to the past.