At this point,
you should have a rough, first understanding,
of what this DOM thing is,
and we did now dig a bit into our DOM,
into our JavaScript representation of this HTML code,
to change this link here, the address of this link.
Now as explained, this DOM thing,
with which we can interact in JavaScript,
is basically the translation of our HTML code.
And there is one important characteristic
about this HTML code,
which is also true about this DOM representation.
In HTML, as we can see here on the left on this slide,
we typically have nested elements.
We have this nested structure, where the anchor element
is a child element of the paragraph,
because it's inside the paragraph,
and the paragraph is a child element of the body.
And for example, the h1 element is also a child of the body,
but a sibling to the paragraph,
because it's on the same level.
We did explore this, way early in the course,
and it is an important characteristic of HTML, this nesting.
And with the DOM, we have the same.
You can think of the DOM as a tree,
a nested tree of JavaScript objects.
We have the document, which has a body property,
which holds yet another object,
which has the h1 and the p element as children.
And the p element is another object,
which has the anchor element as its only child.
And that's why we have this kind of code here,
where we drill into those nested objects,
digging deeper and deeper into different objects.
And is is what we saw before in the console as well,
when we locked, or dired, the document.
There, we could also dive deeper and deeper
into this object, if you remember that.
Now I am emphasizing this,
because it is an important characteristic,
and it's important to be aware of that,
when it comes to looking for a certain HTML element
in that DOM object,
because you wanna change it or anything like that.
Because it is a very common task,
that you wanna reach out to a certain element in your DOM,
and you wanna change it.
Like we did it here for this link,
where we set a new address, that's one way of changing it.
You could also change the content of an element,
and change the text that's displayed on the screen.
Or even at a brand new HTML element,
or how we also planned to do it in this example,
which I showed you earlier.
There, we will need to find a way of selecting
this input element, to find out what the user entered,
and we will need a way of selecting this element here,
where we output the number of remaining characters,
so that we can update this with every keystroke by the user.
We will need a way of getting access to our input element
and to this span here,
which contains the remaining characters.
Because that will be data which we need to update
on the running website, through JavaScript.
So selecting elements is a very common task,
because you wanna extract data, or update data.
And there are two general approaches which we can look at,
when it comes to accessing HTML elements in the DOM.
Two approaches which we can also combine.
You can either drill into the DOM,
and drill into elements as I like to call it.
Which means you use this dot notation
for digging deeper and deeper.
So what we did here,
we drilled into the different levels of HTML elements here.
Or you use some utility functions that are provided
by the browser to you, to query for specific elements,
with certain commands.
So when you drill, you have code like this,
and first child, which you see here on this slide,
is a property we haven't used before,
but we will see it in action over the next minutes.
And when you do drill into your DOM like this,
then you always have to know the exact structure.
You have to know that you want the first child
of another child, because that will then be your link.
So here in this example, we basically know
that this code here will select the anchor element
in the paragraph because we had a look at the console output
and clicked our way through to that anchor element there.
And of course we can also infer
how we need to drill into this,
if we have our look at our HTML code.
We know that for body,
the paragraph is the second element in there.
The first one is h1.
And that anchor is then the first element in paragraph,
the text here doesn't count.
But you have to know does kind of structure,
in order to effectively drill into your DOM
and find a certain element,
so that you can then interact with it.
The alternative approach, which often is easier,
is that you instead don't remember this exact structure,
but you use the utility methods,
JavaScript and the browser gives you,
to search for a certain elements.
For example, by ID or by any CSS selector.
So by tag, by class, by ID,
as you learned it for SS in this course.
And we're going to see these utility query methods here,
in action over the next minutes as well.
The advantage here is that you don't need to know
the exact structure of your DOM and your HTML code,
it's enough to know that there is some element
with a certain ID, or with a certain class,
and you can then tell the browser to give you access
to that specific element in JavaScript,
without describing the entire path to that element
as you would need to know it if you drill into the DOM,
to select a specific element.
And these are basically your two main ways
of traversing this DOM tree,
and of selecting specific elements.
And because it's so important to understand this,
we're now going to practice that.