Transcript from the "Document Object Model" Lesson
>> 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: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.
>> 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: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?
>> 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?
>> 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?