So let's start playing around
with that DOM, and let's see
how we can manipulate it from inside JavaScript,
because of course the goal is not to just output
this document in the console.
And let's maybe start with this link.
This link in our HTML code
has no actual address.
It just has this hash placeholder as an address.
And hence if I click this link, it leads nowhere.
Now let's say we want to write some JavaScript code
that changes this address.
And of course, that's still a bit of a redundant example
because we could, of course, just set an address here
in the HTML code.
But we are learning these basics
step by step here
and therefore for the moment,
we'll practice doing this with JavaScript
so that later we can do more useful
and realistic things with JavaScript.
So therefore, to set this link address,
we will need to get access to this link element.
And we saw in the last lecture
that this link element
is actually inside of this paragraph.
So they're in the children property.
We have this list of nested HTML elements.
So this link here in this case,
since that is the only nested HTML element
in the paragraph.
And on this anchor element here,
we then have various properties that describe
this anchor element to the browser.
And for example, in there,
we find this ref property
that actually does hold some value here,
but this value, if I hover over it
so that we can see the entire value,
is just our local development server
and there the index HTML file hash nothing.
So it is basically leading nowhere.
And we could now try to change this
through JavaScript, and see if that maybe
makes that link do more than it did before.
And therefore, we now need to get access
to this ref attribute in this anchor element,
which is in the children property
of the paragraph element,
which in turn is part of this children array
of the body property,
which is part of the document.
Okay.
So that will be some drilling which we have to do.
And this will become easier later
but for the moment, let's really do it the hard way,
and let's drill into this object.
So let's start with the document,
and then there we want to access the body.
Since document is an object,
we can do this with the dot notation
and access body.
Now body is another object as we saw.
And it is an object which now has this children property.
Children then, as we saw here,
is actually in our body here
holding an array,
as we can tell by these number indexes here.
So now we're interested in the paragraph
and we see that this is the second element
with index one.
So to access this, I actually even see the code here
if I hover over this one,
we have to access children square brackets one,
since I want to access this second element here
in this children property of my body.
So that's not a paragraph.
The paragraph, as we saw, now also has a children property,
which holds another array,
an array with exactly one element,
this anchor element, which is the element
I ultimately want to get access to.
So again, here we see the code for drilling into this.
So I can do children zero here,
to access the first element of this element,
which is the paragraph.
So children one on the body is the paragraph.
Children zero on that paragraph then
is the anchor element.
Just what we see here if I hover over this.
And then this anchor element, as we saw,
has this ref, this href property,
which holds the target destination of this link.
So if I now access dot href here,
and here I'm not getting auto-completion anymore for this,
as you can see, it's not suggesting href
because Visual Studio code doesn't know
that the first element in the second element of body
will be an anchor element.
It could be any HTML element,
or maybe not even exist
if this element wouldn't have any children.
That's why we're not getting auto suggestions here,
but we know that this will exist,
and that this will be an anchor element,
and that it therefore will have that href property,
because we had a look at this output here in the console.
So now here, we got hold of this href element,
and now we want to assign a new value
for this link.
And how do we assign values in JavaScript?
With an equal sign.
You could think that we maybe use a colon
because I mentioned that for assigning values
to properties, we do use a colon
instead of an equal sign,
but that's only the case
if we are creating an object
with these curly braces.
So if I create a new object here
with the curly braces
and I then have some property,
then here I use the colon
for assigning some value.
That is the case here.
But if we drill into a property
of an already existing object
with the dot notation,
then we actually assign a value
with an equal sign, just as we do it
on a regular variable.
And here this new value should not be a string
because this link here is a string.
It's some text,
as we can tell by these quotes here as well.
And we could, for example, target google.com.
So https://google.com.
And then add a semi-colon.
And that's now a very lengthy way of doing that.
We will also soon learn about quicker ways of doing that,
but it is important to understand
how the DOM, in general, is structured
and how you can generally interact with it.
So now if I save that
and we then reload this page,
I get an error,
cannot read property children of null.
And that's a weird error here.
I mean, after all, we carefully checked
that these properties exist
and that we are accessing the right children.
So why am I getting this error?
Did we do something wrong here?
Well, no, we didn't.
The reason for this error
is basically impossible to find
unless you know how JavaScript works
and how it's being executed.