So this document object,
this document property on the window object,
which holds an object itself. is our bridge to this DOM.
And to see this not just on these slides,
but also in action,
I added some HTML code here to this index HTML file.
And that's essentially that code I showed you
on this slide before.
I add this content to my HTML file,
and you can add it yourself, attached,
you also find my index HTML file so that you can download it
and replace yours with it.
If you want to be sure that you are using the same code.
And now, we can play around with that code
and with JavaScript to tap into that DOM,
into this JavaScript object representation
of the parsed HTML code.
And for that,
we don't want to access the window object as a whole.
But instead, this document property,
which we got on that window object.
This gives us access to this DOM, as I mentioned.
Now, I also did mention that the entire window object,
or all the properties and methods off that window object,
are automatically made available globally
as variables and functions,
which is why we can access alert like this,
instead of writing window.alert, which we also can do,
but of course, that's shorter.
And because that's the case, I, of course,
don't have to write window.document,
I can just write document to access this document property
on the window object.
And if I do that and saved as app.js file,
in my browser, I see this dummy content which I added,
which is not too important right now
and which has no styling.
But in this console, in the dev tools,
I see this document thing,
and as an extra nice feature here in Chrome,
in the dev tools, when I hover over this document object,
which is being output to the console,
you see that the page on the left gets highlighted,
because this document kind of represents
this entire rendered displayed HTML code as I mentioned.
Now, we can still expand this object
because it still is a regular JavaScript object,
just fulfilling a certain special purpose, so to say.
And if I expand it, I get this.
I see my HTML code here,
which is just a certain way of displaying this in Chrome.
And that can be confusing
because data does not look like JavaScript code at all.
Instead, that looks like regular HTML code,
which at least proves my point,
that this document object is our bridge
to this DOM thing here.
But, this also is confusing, because I want to clarify,
that inside of this document thing here,
we don't have HTML code.
Instead, we have what I showed on this slide.
We have an object with more properties and values.
And to see this real object,
we can use console.dir instead of console.log,
which is simply a different way
of outputting this to the console.
And it is a way that will output the true object
that is stored in this document thing.
Instead of giving us this special way
of displaying this object, which Chrome has built in.
And when using console.dir, instead of console.log,
if I now expand this, I see the real JavaScript object,
because it is a standard JavaScript object in the end.
And we see a bunch of properties in there,
and we'll also find some methods in there.
And we're going to work with a couple of properties
and methods throughout this section
and throughout this course.
Now, most interesting right now, are two properties,
which we find in there.
If we search for H, we find this hat property.
And if I expand that, we basically find all the information,
the browser stored about our head section here,
which is affecting this page.
And for example, if I scroll down a bit,
I find this children key here, and if I expand this,
I find all the different head elements,
which I indeed did add here in my hat section.
Free meta elements, the title and the script.
I find that here as well, which again, proves my point,
that's that translation of our HTML code to JavaScript.
And that's what the browser uses behind the scenes,
to know what it should display
and how it should display it.
But more interesting than this head property,
with all that stored information, is the body property.
That holds all the information about the body HTML content
and what the browser made of it.
And in here, we also find this children property,
which holds a list, an array,
of all the HTML elements we have in our body.
And that's this h1 element and this paragraph,
and then also a script,
which is actually injected by our life server extension,
so not written by us.
But here, we can then expand the paragraph
and we find another nested object here.
And you can tell objects and arrays apart
by these index numbers.
If you have these index numbers,
then this here is an array.
And if you have other property names, it's an object.
And here we have all the data the browser gathered
about this paragraph here,
including more children,
like this anchor element, in this case.
And you see if I hover on that,
it gets highlighted on the left, in my page.
And that's a lot of useful information,
which we can access through JavaScript to,
for example, extract some value a user might have entered
into an input field if we had one.
And we can also manipulate that to, for example,
change the styles or to see this as classes
or the content of certain elements.
And that's what we'll do in the next lectures.