So let's now solve this together.
And first of all,
I will go to index.html
and make sure that exercise.js is included there
with that defer attribute
to make sure that it only runs
once the entire HTML content was parsed
and the DOM was created there for it.
And then we can get started solving these tasks.
And I'll, again, solve them right below the instructions.
It's, of course, up to you whether you did this as well.
Now here we should select the element
by drilling into the DOM.
And for this, I'll create a new variable,
and I'll name it h1Element,
because in this variable,
I will store this selected element
which I am about to select,
hence this name, because variables should always describe
what you store in them.
And now to get access to this element in our DOM,
we will need this document object,
because we learned that this is our bridge to the DOM,
so to this parsed HTML code.
Now the element here is part of the body.
So first of all,
we need to dive into the body here.
And then to get access to this element,
we could use firstElementChild, as we saw before,
because the element
is the first HTML element child of body.
So that's one way,
or if I copy that,
an alternative way would be children 0,
so getting access to all the child elements of body.
Children excludes text nodes,
so it's really only HTML elements
and then accessing the first child element like this.
And that's another way of storing it in h1Element.
You only need one of these two approaches.
Here, I'm just showing both
because, well, it is a practice after all,
but that's how you could select this element
by drilling into the DOM.
And to see that this works,
I'll console.dir my h1Element here,
whoops, element like this,
and then save everything.
And here, indeed, I see my element being logged
and we can have a look at its properties here.
So that's working.
The next task is that we should use this h1Element variable,
and therefore, this stored element object
to get access to its parent,
And then in the bonus task,
also to get access to the sibling.
So here, I'll start with the parent.
And for this, I'll just console.dir h1Element.,
and then how could we get access to the parent?
Well, we can have a look at all the properties we have here
with help of the auto suggestion pop-up,
or we have a look at this output here,
which we have because of console.dir h1Element.
And I think it's a bit easier if we start there
in the browser DevTools.
Here, maybe let's scroll to P
and see if we got some property
that helps us with getting access to the parent.
So if I scroll down to the P properties,
indeed, we got the parentElement and the parentNode.
And here for the parent, both is the same.
So here we don't have that textNode case.
So we can use either of the two.
And hence, here I could console.dir h1Element.parentElement
to output the parent element,
which in this case is my body.
Now here, I'm directly outputting the result
of accessing this parentElement property.
Of course, alternatively,
we could also create a new variable,
store the result of accessing parent element
in that variable,
and then console.dir that variable.
It would have the same effect,
but if we never plan on using that value
anywhere else in our code,
using it instantly, without storing it in a variable first,
is definitely also okay,
especially if the overall code line
still stays quite readable and is not getting too long
as it clearly is the case here.
This is absolutely fine to read.
And here for the bonus task,
we want to do the same for a sibling.
So I'll console.dir h1Element,
and then let's see,
let's see which sibling properties we have.
If I scroll to S,
well, there is no sibling here,
but we do have this previousSibling here.
So it doesn't start with S,
but it is clearly the sibling
that comes before the element,
so between and .
And you might think that there is nothing in between,
but you did learn about these text nodes,
and indeed, we have such a text node here,
this line break and this empty text here,
which is between the element and the .
And sibling, indeed, includes text nodes.
We also have previousElementSibling,
which excludes text nodes, and that's null,
which means there is no previous element sibling,
because that's the case here.
There is no other HTML element between and ,
and body itself is not a sibling,
because it's a parent.
It's on a higher level.
is a child of body after all.
But since we have previousElementSibling,
we might also have a nextElementSibling,
which then would be this paragraph we're looking for.
So let's go to N here
and indeed the nextSibling,
which includes text nodes, is a text node.
It's this text,
so this line break and this white space
between the tag and the paragraph,
but the next element sibling,
which excludes text nodes,
is this paragraph we're looking for.
And therefore, that would be the solution
to this bonus task here.
We can access h1Element.nextElementSibling,
and that should output this paragraph in the console.
So if we save everything here, we indeed get h1.
That's our first console.dir statement.
And then for this, the middle one console.dir statement,
we get the body.
And for the last one, we get the paragraph.
And that is this second task,
including the bonus task, solved.
Now let's move on to three, task number three.
Here, we should again select the element,
but now with getElementById.
Now at the moment,
this won't be possible, because this element has no id.
And of course, as the name suggests,
getElementId only works if you do have an id.
So the effort to solve this task,
or to complete this task,
we need to add the id attribute to this HTML element
and then give it any id of our choice
that is not being used on any other element,
because ids have to be unique.
So here that could be first-title, for example,
of course, the id text is up to you.
And with that id set here in exercise.js,
I can now overwrite the values stored in h1Element
with the result of using document.getElementById.
That was the utility method we can execute
to tell the browser
that it should search this element for us
and return this element to us here,
and then here it was first-title.
And hence, if I then console.dir h1Element here
and I save this all,
I, again, get my h1 element being output here.
And that is task number three solved.
In task number four,
we should select the second paragraph here
with help of querySelector.
And I suggest that you maybe use a class
and then the class selector to do so.
And I want to do that, but in order to do it,
we of course have to add a class here,
a CSS class to this paragraph,
which I'm now not adding to apply certain styling
because we have absolutely no styling in this demo project,
but which I instead only add so that I can query by it
in my JavaScript code,
which is also a valid reason for adding CSS classes.
And here, I'll then add a class named highlighted-paragraph,
or whatever you want,
copy that class name and then exercise.js here.
I'll then store it in a variable,
because that's also requested here,
which could be named highlightedParagraph
if we plan to do some highlighting with that later on
or anything like this,
and then use document.querySelector
and pass our CSS selector as a parameter here,
so as a string.
And for selecting by class, the CSS selector,
the appropriate CSS selector is dot and then the class name.
That's what we would do in CSS code as well.
And that's what we need for querySelector here.
And with this, we can also console.dir
this highlightedParagraph now.
Here it is.
Last but not least, in this bonus task,
we should now try changing that text content.
And we will have a closer look
at changing and manipulating the DOM in the next lectures.
Still, maybe you already were able to do that,
because if we have a look at this paragraph
which we're outputting here,
if we look for T,
since our goal is to change the text content,
if we look for T,
then we will see if I scroll all the way down,
that indeed, there is this textContent property.
And this indeed holds the text content,
so the text node content of this paragraph.
And you see there is a line break,
a bunch of white space,
then this a text,
another a line break and white space,
and then the link part.
Without the HTML element for the links
so without the anchor element,
because this really only includes the text content
of this paragraph,
and that is the text content we see here,
including the line breaks and the white space.
It is important to realize
that these line breaks and the white space,
that this is all part of the text content,
but that the browser just doesn't display it.
We don't see the line break or the white space here,
but it is technically part of our HTML code,
and it is part of this text content,
which is saved in the DOM.
And since we have this textContent property,
we could try assigning a new value to textContent,
so overriding the existing textContent with a new one,
and that then might have an effect on this page.
So that's how we could maybe solve this bonus task.
So here we can access the highlightedParagraph
and then access the textContent property,
and then assign a new value with that equal sign,
not with the colon,
because you learned that you only use that
when creating a new object with help of these curly braces.
When not doing that,
you always assign values with the equal sign.
So here that's how we can overwrite the values
stored in this textContent property
of this highlightedParagraph.
And here we could say, 'This was changed by Max!'
or whatever you want.
Save this, and if I go back,
indeed, we see, "This was changed by Max!"
here on the screen, so that works.
And that's even this bonus task solved.
Now, if you struggled with that bonus task,
that's absolutely no problem though,
because we are going to take a closer look
at how we can manipulate the DOM in the next lectures.