We learned how we can select elements,
and it can definitely
be tricky to get that right.
That's why it's super important to practice it.
I told you to play around
with that a little bit on your own.
So that you get more familiar,
with the different ways of selecting elements?
Now it's time to practice this together.
It's exercise time,
and attached.
You'll find this exercise JS file,
which contains some tasks,
for you to practice what you learnt.
Now in task number one,
I want you,
to select D H one element,
which we have in our HTML code,
by drilling into the dome.
So not with get element by ID,
or query selector,
but by diving
into the properties off some other objects.
As you saw it in the last lectures,
it's up to you,
which specific way you choose.
There will be more than one way of getting access
to this element.
But once you've got hold of it,
you should save it in a variable
with a name of your choice.
That's task number one.
In task. number two,
I want you to use that variable from one,
and then do something
which we haven't done before,
but what you should be able to do,
nonetheless, get access
to the parent element of that stored H one element,
which is stored in that variable.
And for that you of course might want to console dir,
that variable,
which you created here
so that you see which properties are available on it.
And maybe you'll find some property
that gives you access
to the parent HTML element.
So to the body element,
since that is the parent
of this H one element.
Now they're all as a bonus task,
you can even extend this a bit further,
and also get access to
the sibling element of H one.
So to this paragraph which we have here,
this paragraph is a sibling of H one.
It sits on the same level,
and maybe that's a little bonus.
You even find a way
of getting access to that.
Now you don't need to store the body,
or this sibling element at any variable,
just getting access to it.
Maybe just console logging
or console during it to the
console,
is all you got to do.
It's just about practicing that you do get access
to certain elements.
Now in task number three,
I want you to again,
select this H one element,
but this time with get element by ID.
And for that, of course,
you might need to add an ID
in the HTML code first,
and then store it in a new variable
or in the same variable.
That's up to you,
in task number four,
I want you to select the second paragraph elements.
So this one, the second
of the two paragraph elements,
and you should select it with query selector.
And for that,
you also might need to adjust the HTML code a little bit
for example, also to mix things up.
You might want to consider adding a clause
to this paragraph,
so that you can select it with that clause
and then store that in a new variable.
Again, with a name of your choice.
And as a side note,
when I say name of your choice,
you of course should use names
that follow the conventions you learned about,
up to this point.
And that of course describe what's stored
in the variable
as you learned it.
Now, then I got a last bonus task,
which means if you're not able to do that,
it's no problem.
You will see in the solution,
but maybe you can do that already.
I want you to try
and change the text content of this
paragraph element.
Which you selected in four
and set it
to any other text of your choice.
Again, you might want
to console dir this paragraph element.
Once you saved it,
in a variable
so that you see which properties are available there.
And which properties might allow you
to change something,
that's it for now.
These are my tasks for you.
Definitely try this on your own first,
but then also have a look at my solution,
and compare yours to it.
So that you see how I solved this.