We wrote this beautiful code here and yet it fails.
The reason for it failing is
that actually our JavaScript code here executes too early.
We actually load our JavaScript code
here in the head section.
And it's important to understand
that the browser goes ahead
and executes this loaded code right
away when this line of code is parsed.
And this line of code is actually parsed
before this code is parsed.
So our JavaScript code executes
before the browser, even parsed these HTML elements
and created the DOM representation for them.
Hence if we try to drill into the DOM here
and we try to access different elements,
they don't exist yet.
Now you might remember that we were able
to console 'log' or 'dir' document though.
And we were able to drill
into it there in this JavaScript console earlier.
And that only works
because the document exists right from the start,
which is why we can log it immediately.
And the content of it, which is missing initially,
is basically added to this document object
after we initially locked it.
So what we're outputting in a console is updated
behind the scenes, which can be confusing,
but is how it works.
So that's where we can log it, but not change it
because when we change it that happens instantly.
It's not waiting until maybe the content is there.
So how can we work around that?
There are two ways of working around that;
we can take our script and not load it here in the head,
but instead cut it
and move it to the end of the body section here.
Then we ensure that this script is only parsed
and executed, once all this content is here.
So if I now save that,
you see if I reload the error is gone.
Now we'll see if it worked in a second,
but that's one way of fixing the error.
The other more elegant and recommended way is
that you will leave it here in 'head'
and you add another attribute to this script element.
And that would be the 'defer' attribute.
This is a so-called Boolean attribute,
which you just have to add like this,
you don't have to set a value.
Just adding it like this already activates it
and 'defer' tells the browser
that it should defer the script execution
that it should wait with the script execution
until the entire document has been parsed.
So if we add defer here, it also works
and we also get no error.
And now let's see if our code in the script actually works.
If it does, if I click the link,
I should now be redirected to Google.
And indeed, if I click it, I am.
If I inspect my link here, I also see
that this link, this link address shows up here,
and clearly I did not add it here in my HTML code.
So since it does show up here
and since the link does work as intended,
that has to be the result of our JavaScript code.
And that's a first way,
a first example of how we can interact
with the DOM to manipulate the page.
Not too useful and still a bit clunky,
but a first important step.
Now let's dig deeper and let's see how we can do
this in a more elegant way
and how we then can also do more useful things with that.