Now to practice this, I'm here in my console,
in the DevTools on the loaded webpage
because now I'm not going to write code here
in app JS but instead, the great thing about
this console is that we can also write code here.
If you click into this field down here,
you can write JavaScript code here as well.
And we can then instantly run this code
by just hitting the enter key.
And that will allow us to play around with JavaScript
in an easier way than if we have to write to code,
save it, and then see the result here
and now let's say we wanna select this H1 element here.
Now, when we wanna drill into the DOM,
we can do this with a document body as we did it before.
And then for example, with children and you see,
we get auto completion here in this console as well,
children and now I even get a preview here.
This is not the final output.
I get a preview here of what's inside children.
We get an array with three elements.
The script was not added by us, as mentioned before.
It's injected by this life server extension,
but we have our H1 and our P element.
And if we wanna select the H1 element,
we can easily see it here in this preview
that we need to select the first child.
And if you, now hit enter, that's being output here.
By default it's output like this,
not in his object form but in this HTML form,
which isn't really JavaScript but a little,
utility functionality by the Chrome DevTools
where it outputs it like this.
If you wanna see it differently,
then you can consult dir and then put your code in here so
that you console dir this result instead of logging it
which would be the default if you hit enter.
If you hit enter here with console dir,
then we get the real object being output here.
So that's one way of selecting this H1 element
and I'm going to clear this console here with this button
and then I'll show you an alternative way
because an alternative way would be
to access the body and then first child,
except for the fact that now we see the first child
is actually some text, as it seems.
Not the H1 element.
If you use document body, first element child
on the other hand, you get this H1 element,
and that's another way of drilling into the DOM.
But why are we getting texts here
if we use first child?
Because for that, it's important to understand
that in our DOM here, we don't just have all
these HTML elements but the text which we
have in our HTML document also is of course saved
and understood by the browser.
Now, when we access children, as we did it before,
this children property.
That will only include child elements,
child HTML elements and their DOM representation.
But as I mentioned, that's not
all the information the browser saves.
It also saves all your texts
that is part of your HTML document.
So all the non HTML element content
and you'll see that if you use child Nodes
instead of children.
A Node is basically either text
or an HTML element and your entire content,
your HTML content is translated to these nodes.
So to these objects with information about your content.
Up to this point, we always had a look at HTML elements
and the their objects.
And these are the most important nodes
but all the text content is also saved as such nodes.
And we can see that with child nodes or with first child,
which actually asks us to first child node,
not the first element child,
that's what views first element child instead for.
And that can be confusing
but it's only important to remember that your HTML content
does not just consist of HTML elements
but of course also as texts and those text pieces
are also stored in the DOM
and with the nodes with child nodes, you get access to both.
With children, you just get access
to the HTML elements that are stored.
And with first child,
you actually access the first child node, so to say.
The name is just a bit confusing here.
Now, it could still be confusing
that first child is actually texts and not the H1 element
because the first child element of body is not texts,
but H1, it would be different if we had "Hi there" here.
Then we could argue that the first child element of body
is text and not an H1 element,
but that's not what we did have.
But keep in mind that we have all this white space here and
this white space is not displayed on the screen,
but it's technically part of our HTML content.
And that is this first child text Node here.
This first child text Node here is actually this empty text.
We can see this here, this data thing here
which looks a bit weird is a lot of white space.
And this backward slash N thing here just means line break.
So it's a line break and then a bunch of white space.
And that's exactly what we have here instead of body.
A line break into this line 11
and then a bunch of white space.
And that's actually our first child node
in this body object in our DOM.
And we have those texts nodes
in addition to the HTML elements.
Now I will say that this is not too important
to keep in mind because most of the time,
you will work with the HTML elements.
So with the kind of content you find
in the children property
but you should have at least heard about text nodes.
And that's why I also wanted to mention them here.