From the course: JavaScript Essential Training

DOM: The Document Object Model - JavaScript Tutorial

From the course: JavaScript Essential Training

Start my 1-month free trial

DOM: The Document Object Model

“

- When we humans encounter objects in the real world, we create models of those objects in our minds. Just think about it. If I say the word backpack, you immediately have a prototypical model of a backpack in your mind. What that backpack looks like and how it functions and what it contains will be different from each person, but the overall model is the same. A bag of large-ish size with two straps on the side that you can put over your shoulders. And here's the thing, that mental model of an object, the object model, gets more complex and detailed the more we know about the object. So if I take this backpack and open it to show you the pockets and features inside, you'll immediately develop a more advanced object model for this particular backpack and what goes inside. Just watch. Let me just close up this backpack. And then I say, "Help me find the pig." Even though you can't see it, you've established an object model for this backpack, complete with a robust hierarchy, and you can use that to not only find the pig, but even explain to someone else how to find it. I want you to do this for me right now. Take out a piece of paper and a pen, and imagine you're writing a set of instructions to a complete stranger on how to find the pig inside this pack. Start with, "Grab the gray backpack," and then list out each step necessary to get to the pig. I'll wait. Okay, that's enough. Now, you and me, we've probably never met, right? And there is literally no way I could possibly have seen what you wrote down because I'm here in my house recording this months before you're watching it. Agreed? Even so, I'm pretty sure I can make a list of steps to match yours very closely. Let's see. Number one, grab the backpack. Number two, open the right side panel. Number three, open the zipper inside the panel. Number four, take out the black pouch. Number five, here's the pig! Now, we humans naturally organize all the objects in the world around us in logical hierarchical structures. This is why, if you come to my house and I say, "Can you get me a spoon?" You would immediately go to the kitchen and start looking in the top drawers, because in most cases, due to their shape and their frequency of use, that's where cutlery is stored. What we have in the example of the bag and the example of the kitchen are hierarchical trees with a trunk, branches, finer branches, and eventually leads. What on Earth does any of this have to do with JavaScript? Everything! You see, when you present a web browser with an HTML document, the browser does the exact same thing we just did. It creates an object model for the document, a document object model, or DOM for short, and this DOM describes the hierarchical tree structure for that document, how the different elements in the document relate to each other and are nested. It is so similar, in fact, I can make an HTML representation of this backpack, and then find the pig the exact same way we just did in the real world. This right here, being able to traverse the document object model tree to find the element or elements you're looking for, is an essential skill when working with JavaScript. Because, just like your friend who has never seen this backpack before, you need to be able to tell JavaScript exactly what to look for, the pig, and where to find it, in the right side panel inside the zipper in the black pouch.

Contents