Finding elements by CSS selector (Video Version)

You've now got a lot of tools
in your toolbox for finding elements.

And those will work great
a lot of the time.

But there is one final tool
that's the most powerful of them all:

the ability to find elements
based on any CSS selector.

Do you remember CSS selectors?

The basic ones were
finding by tag name,

or ID

or class

But there are many
more advanced selectors:

descendant selectors, attribute selectors,
combined class plus element selectors--

this would be a good time
for you to review CSS selectors

if you've forgotten all of those.

For example, what if I wanted
to specifically style only the elements

with class name "animal"
that are inside a paragraph?

Let's stick a `` tag in
and do that.

So I would first write `p`,

and then a space, to say that
I'm looking inside ``s,

and then dot animal to say that
I'm looking for any elements

with class name "animal".

And I'll just color them red.

Beautiful.

Now, I could use the same CSS selector
to find those elements in JavaScript,

using the
`document.querySelectorAll()` method.

So I'll change this line here.

And I need to pass the CSS selector
as the argument,

as a string in quotes.

And there, the paragraph
is about cats again.

You could pass any valid
CSS selector to that function,

and it will return back
a collection of elements

that you can then loop through.

Do you remember last time
how we said

that `getElementsByTagName()`
returns an HTML collection

that looks a lot like an array?

Well this method returns a `NodeList`,
which is also a lot like an array,

in that we can use the brackets on it,
we can check the length, all of that.

And you probably won't run into
the differences between

a NodeList and an HTMLCollection
when you're using these methods.

But you are welcome to look them up
if you'd like to learn more about them.

Okay, now, there's also a method
that will look up CSS selectors,

and return only one element,
if you know your CSS selector

is only selecting one thing.

In practice, it's not really as useful,

because you usually have
an ID that you can use in that case.

But I'll show it to you just in case.

So here, instead of `getElementById`,
I could actually say:

`document.querySelector("`

and then for the actual query,
to make it be an ID, I just add that hash.

Ta-da.

So, as you see, this is really similar
to `querySelectorAll()`,

except we're only selecting one,
so it's just `querySelector()`,

and we just pass in some CSS selector
that we expect to get back one element.

So when should you use
each of these tools in your toolbox?

The first ones that I showed you
tend to perform better.

So I suggest using those when you can.

But if you're in a situation where
you need to use a complex CSS selector,

and you can't use those,
then `querySelectorAll()` is your friend.

Try it out in the next challenge,

then get ready to see way more ways
that you can manipulate this webpage.