now the reason we're able to use document here is because we're in the global scope.
And global scope is window.
And window has an attribute, has a property called document in it.
So when we say document, this will obviously go ahead and
look on the window object to see if document is one of its properties.
And, in fact, it is.
So document.getElementById, and we're going to say title.
Let's go ahead and console.log this.
So let's see what happens when we do that.
Let's save that, and we get null.
Well, that's kind of strange.
Why would we get null?
Why are we not getting this Lecture 53 title?
Well, the reason we're not getting it is because of when
this line is being executed.
Let's take a look at our index.html again.
This line is executed just like any other JavaScript,
is exactly where it is mentioned.
So it's as if we took this line right here and we copy and
pasted it right in the middle of the script tag.
Well, the problem is, is that, when you are calling and asking the document to
retrieve for you something that has an id title, at this point of
the rendering of the HTML page, the h1 with an id title doesn't exist yet.
So, therefore, you get null.
So how do we solve that?
Well, there's actually a couple of ways of solving it.
One is to have a special method that listens for an event in the life cycle
over the page loading, and says, when page is loaded, go ahead and execute this line.
However, there's even a simpler way to fix that.
Especially with the fact that what we're trying to do is
insert some behavior into the page.
It's not how the page is going to look, it's how the page is going to behave.
And whenever things like that, JavaScript code like that is executed,
it's always best not to keep it in the head, but
actually place it at the very end of the document.
So, which is what we're going to insert right here.
So this JavaScript is going to execute after all of these things have been
already processed, loaded in the browser's memory and
the document object model is now going to be alive and well.
So now, if we save that, you'll see that now, we are getting,
at this point, the h1 that is an id equal to title.
So this code executes just fine
only when this element has all ready been loaded and rendered.
Now the reason we're able to use this function called getElementById
is because document is a special object and
the object name of the document is HTMLDocument.
It's a special object that has a whole bunch of different methods
that you could call in the document.
So in fact, we can actually console that out,
console.log(document) and find out is it an instanceof.
It's an instanceof operated we actually haven't seen before that tests whether or
not our particular instance is actually an instance of a particular class.
In this case, it is HTMLDocument.
So if we print that out to our console or save that, you'll see that that's true.
So document is actually an instance of HTMLDocument.
So if you go on the web and look up HTMLDocument, you will be able to see all
the methods that HTMLDocument defines for you to help you manipulate the webpage.