Document Object Model

[00:00:00]
>> So, what we've got here is an HTML document. This very beautiful, exciting modern web page is an HTML document. And if you wanna see the HTML, we can go back to the inspector, which is what we opened first when we clicked Inspect, and we can see some stuff in this document.

[00:00:24]
And what we're seeing is an HTML document, and what JavaScript is seeing when it looks at that document is represented by something called the DOM, the Document Object Model. So let's talk about what a document looks like and what it has in it. So this is kind of a simple document.

[00:00:42]
This is similar to the structure you'd see if you look in the inspector for this Tic-Tac-Toe page. So, let us try just to recap kind of HTML and understand our own mental model of how this page, how this document looks. Let's try to draw this as a tree of HTML elements.

[00:01:04]
So what I'm gonna ask you all to do is help me draw out a diagram representing the structure of this HTML document. So, what is the top-level element in this page? Shout it out, anybody.
>> HTML.
>> Yeah, so the HTML here is the element that we're working with, and then lang is an attribute on that element.

[00:01:29]
So this is maybe just like kind of HTML structure [LAUGH] here at the top of this page. And when I say top, I mean kind of the highest level element there is on this page, we have an HTML element with some attributes on it, including the language. Great, excellent.

[00:01:49]
Okay, what is contained, or we could say children of that element? Yes?
>> They're asking what about the doctype?
>> What about the doctype? That is a great question. So the doctype kind of defines the document. And we could say, technically, that there is kind of a document that sort of sits above the HTML element.

[00:02:16]
But since we're working with HTML documents, and the doc type declares, hey, this is an HTML document, we're usually going to kind of not think about that sort of meta level of that this is all contained in a document. Except that is going to be how we refer to it in JavaScript.

[00:02:31]
So the HTML and the document kind of mentally we can sort of merge together. But essentially, yes, there is a document, which then has an HTML element that contains the content of the page, and that is a really great point. So what then else do we have in this page, what is contained within this HTML element?

[00:02:55]
What elements do we have there? Yeah?
>> The heads and the body.
>> Yes, okay, great. So we could say we sometimes call these children of the HTML elements. So we have a head and a body. Okay, and then so you'll see there are some dot, dot, dots here that just sort of indicate that there's other stuff contained within, for example, the head.

[00:03:19]
But what about the body? Let's dig into that a little bit more. What children elements do we see on the body element in this page?
>> Header.
>> Excellent, header, so we have a header, child, and this is where every page is gonna be different. Maybe you have a header, maybe you don't, maybe you have other elements there.

[00:03:37]
And similarly, that might have some other things going on inside of it, we have some dot, dot, dots. And then, what else do we have, in this case?
>> Div.
>> A div, yes. What is a div often used for in HTML?
>> Divides things, controls sections.
>> It divides things into, yeah, so I might not say section just because there is also a section element that we might use.

[00:04:09]
But div is kind of a general purpose maybe grouping element, we could say, that collects a bunch of other elements. So we usually don't just see a div, we usually see a div with stuff in it. Yeah, comment from the chat.
>> They're saying a div is a container or a box.

[00:04:29]
Brian Holt and his intro to web dev calls it just kind of like an empty box, like a cardboard box or something else.
>> Exactly, yeah, yeah. So a container is a great way to think of a div. It's kind of an element that collects other elements inside of it, like a moving box.

[00:04:47]
Yeah, great point. And so, this is not an HTML course, cuz there are other great courses out there for this. So, we're not gonna be digging into too much detail about all these different types of elements that you can have in an HTML document, or otherwise said, as you pointed out before, kind of the content of the page, right?

[00:05:07]
There are a lot, a lot, a lot that can be said about HTML. It's another infinite learning journey. But suffice it to say that we're mapping out here the structure of the page because JavaScript, just like us, when we read a document like this as humans, we kind of parse it out in our heads.

[00:05:26]
We construct our mental image of how this page is structured that maybe looks something like this tree. And JavaScript does that as well. And so, whatever we can work with an HTML, JavaScript can also interface with, we could say or sort of construct a model of, and that is what we call the document object model.

[00:05:45]
So essentially, JavaScript creates an object, which we're gonna talk more about exactly how objects work later. But JavaScript creates an entity that represents this document and all of the structure inside of it, all of the content, all of the other elements that it has. We will dig into the document that JavaScript represents this page with.

[00:06:07]
Let's just quickly go back to our webpage and our console. And in our console, if I type the spell document, it's a special word, that means the document that we are currently in, that we're currently looking at. You'll notice I get some kind of value with all kinds of stuff in it that represents this document to JavaScript.

[00:06:33]
So if you'd like, feel free to poke around in this document object that you can invoke by typing the word document into the JavaScript console. We'll talk more about how we can work with this in JavaScript to interact with the web page.