All right.
So it's time for a quick exercise.
This one is going to cover the different DOM selectors that we just discussed.
So the way that works giving you some H M L simple shemale and H-1 three four paragraphs.
Some have ideas some have classes some have nothing.
And what I want you to do is come up with four different ways to select the first paragraph.
So at least for there's more than that using the different methods that we talked about Document get
element by ID by class name by tag name Corey selector queries like are all mix and match those and
come up with four different ways to select this.
If you'd like you can download the code attached to it.
Otherwise go ahead and just type this up yourself come up with for examples puzzle video and I'll be
back in just a few seconds.
OK so let's talk about how we could solve this.
I have the H Tim L file here.
We've got an H1 and here's the paragraph that we're after the first paragraph.
It has ID equal to first class is special.
And then there's some other paragraphs that we don't really care about.
So to select it we have a few different options.
Let's start with get element by ID.
So just to document type get element by ID first.
We could also select based off of the ID first using queries selector to document that query selector
.
And we can't just say first we also need to see a selector syntax which means adding that Octa Thorp
which tells Querrey selector that this is an id called first and we get the same thing.
So we can also select based off of the class which is special.
So we could do document that get elements by class name and the class name is special and that's going
to give us two elements that have that class name.
So to narrow it down to just the first one we would add on zero afterwards square brackets zero.
And that gives us the first paragraph.
We could also use query selector and we use the dot syntax because it's a class.
This time we don't need the square bracket zero because regular old query selector only gives us the
first result.
If we used query selector all we could add zero afterwards and it would work the same way.
We get the same first paragraph.
The other option we have is to select based off of the tag name which is paragraph or P so we can do
document Get elements by tag name pass in P and that gives us all paragraphs.
So we would do bracket zero.
We could also use query selector.
So document that query selector and we don't need to change what's inside the print CS because India
says this is how you select a paragraph tag.
So query selector will give us the first one.
So you can see here or we could also do queries like are all and add in zero.
We can also make life harder on ourselves and use some more creative CSSA selectors.
For instance I know that this paragraph the first one is the first paragraph directly after an H-1 they're
adjacent so I could write a CSSA selector that says Select the paragraphs after an H1 or adjacent to
each one with the plus sign.
So that would look like this.
If I really wanted to do it.
Cory selector and that would be H-1 plus paragraph.
And that also gives me the first paragraph.
There are plenty of other ways that we could do it as well.
We could do first of type paragraph.
We can get pretty creative but there's no reason to do that if we can just get it with an ID or a class
name or tag name.
OK.
So hopefully you are able to come up with at least four of those as you can see there's a lot of options
just like in C S S we can target something in so many different ways.
There's not really one right answer in this case because it has an ID.
I would probably just use queries selector with the ID which is what we did up here.
Or get element by ID