Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So let's take the DOM piece by piece. Well, what do I mean by document? Well, if I am in Microsoft Word, that might mean one thing, but we're not. For us, the document simply means the page, not the site, the web page; the web page is the document. But this document can be represented in different ways. Well, it already is. You know this already. After all, which one of these is the web page? Well, both of them. One is the browser view, one is the source code.
For us, it really means the elements, the components, the individual pieces of this document. If I talk to a user, I can say, "Look at the headline, look at the bullet point list, look at the whole page, even look at the third letter in the second word," and they understand what I mean. If I talk to you as a web developer, I can say, "Now, look at the h1 tag, look at the unordered list part, look at the whole document." All of these things are objects and yes, sometimes they contain other objects. That's okay.
But with a web page, we should be able to take any HTML and represent it as a tree structure. With the simplest of HTML here, it contains a head and a body. The head itself contains the title element, the body contains an h1 for a heading, a p for a paragraph, and an unordered list. The unordered list contains three list items. We're able with this diagram to represent the structure, the tree structure of this HTML document. We could even decide on words for these.
If we were drawing this up on a whiteboard, we could call each of these pieces nodes. We'll pick a p or a body or h1 and call them all nodes. We could even develop terms to describe relationships, like picking a node and asking, what's its parent? Does it have any child nodes? And really. here what the model means is, what do we call these things, and how do we describe the relationships between them? Because it's not going to do me any good if I make up my own names for these objects that conflict with your names for these objects, if I call a piece a node and you call it a doohickey.
That's why we need to know the DOM. It is the way to reach into the page from our script and the way our page can reach into our script.
Get unlimited access to all courses for just $25/month.Become a member