- 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.