Okay.
So, in the last lecture,
we had a look at a couple of properties
we can use to drill into the DOM.
And, we talked about text nodes
and HTML element nodes.
Now, let's come back to accessing elements in the DOM.
We learned that we can use the first
Element Child to get access to this H1 element
or Document Body Children,
whoops, children Ciro, for example.
And of course, on the other hand,
if we typed document.body.children[1],
we get access to this paragraph.
And conveniently,
we even get that highlighted here on the left
as I'm typing this command.
So it's really very convenient to play around with that
here in the Chrome Dev Tools.
That all works, and that's great,
if we did want to change the content
of a certain element,
this is how we can select it.
But of course, as mentioned,
when you do dive into your DOM tree,
your DOM structure like this.
You always have to know the exact DOM structure.
And if you ever change it, for example,
if we add a new paragraph in here,
"I'm new",
and we wanted to access this second paragraph,
which before was the only paragraph.
Then we have to adjust our code where we drill into the DOM,
because, now all of a sudden,
the paragraph is not the second child in Body Children,
but the third one.
So that can be a disadvantage,
if you drill into your DOM like this.
And you see here,
I'm already getting an error,
if I go back to my page,
because the code we have in app.js
did try to access the second element,
which previously was the paragraph with the link,
and then the first child off that element,
which previously was our anchor element.
But since I did now,
insert does new paragraph in front of this second paragraph,
the second element,
which we're accessing in our body,
is now that new paragraph,
because that is the second element here.
And when I then try to access the first element in there,
then this element doesn't exist anymore,
because this paragraph has no child element.
It has a text node, but no HTML child element.
And that's why I'm getting this error here.
We're trying to set 'href' on an element,
which we did not find, which was undefined, so to say.
And that's why using this drilling approach
can sometimes be useful,
but mostly only if you want to access the direct child
or parent element of another element.
Instead,
it's more common that you use these query functions,
these query methods,
which are provided to you by the browser.