So far we've talked about why dominate appellation is exciting.
Why you should care.
The different sites that use it the endless possibilities the games all the exciting things.
But we still haven't really talked about what the DOM actually is.
So we're going to do that in this video to start let's just define it.
Dio am.
Dom stands for Document object model.
The meaning of those three words will make a little more sense in the coming slides.
But let's start by defining it at a higher level.
The Dom is the interface between your javascript and your age.
Tim Mounty SS It's basically a bunch of special javascript objects javascript methods functions that
we can use to interact with our H.M.S. assess we can change things we can add elements remove elements
change colors animate things all sorts of exciting ways to interact with their H.M.S. assess.
On this slide I talk a little bit about how the DOM is constructed and why it's called the document
object model.
So when we load up an email page it looks like this in a browser and it's just some simple edged him
out so you have a title and a tag with my link as the text and an H-1 with my header as the text and
that's it.
So when I open this up in the browser I see this but behind the scenes the DOM is created.
It's constructed from this right here.
So what I mean is that this age Tim is turned into a bunch of javascript objects.
Each object models one of these elements.
That's where we get the object model part of document object model.
So again just to reiterate we load up each team in the browser the browser displays things to us like
this.
But behind the scenes it actually makes this model of every single element with a javascript object
just like we modeled my dog Rusty using a javascript object.
He had a property name and an other one breed and age.
These objects are fundamentally the same thing except the content is different.
They're going to have things like type of tag text source attributes color background color text size
all different properties that are all contained inside of each object.
We're definitely going to spend a lot of time working with these objects so the specifics aren't important
.
All that I want to emphasize here is that we load up each tim L..
It's displayed in the browser and the browser takes that Tim L and takes each element and turns it into
an object.
So that covers the object model part.
What about the document.
So you can see here this is a little diagram of the type of structure that we get from the DOM the top
level object that everything is contained inside of our entire model of the H.T. mounseers us is called
the document.
So we can go to any web page at all.
So I have Google open and I'm just going to type in the con. The word document.
And when I do that I get this big thing that comes back this big object.
Except it doesn't look like a javascript object.
It's not really what we would expect.
That's because the browser is kind of hiding it from me.
What it actually is showing me is with the HQ mail looks like as text but it's not showing me the actual
objects that are modeled on this Timo.
So to get that we need to use cancel dot D I R which is another method on the console object and we're
going to cancel that D.I.R. document all that this will do is print out the entire document object in
this object syntax that we're familiar with.
So you can see it's just a regular object just like the ones we've written on our own just the same
as Rusty the dog object except there's a lot more information here.
So we have things like fonts or images links but we also have things like body and this body represents
the entire body.
So every element that you see on here is inside of body.
So if I open body up you'll see that we have a whole bunch of other properties including one called
Child's nodes.
So child nodes shows us that there is a div there's a script tag and there's another div inside of the
body.
And if we went to elements we would see that.
So here's the body inside of body.
We have that first div we have a script tag and we have the second div.
And then what say we open up that third div we would expect to see two more divs inside if that second
div.
And if we go over to the consul and we look at the second div and then we look at child nodes we see
OK there's two more divs So as you can see the dom gets really huge really fast.
There's hundreds and hundreds of different properties and methods and different nodes and this whole
crazy structure of nested objects.
It's just so much stuff.
It's one of those times that I mentioned at the beginning of this class where you're going to have to
be comfortable not knowing everything.
I can tell you now that most developers don't know half of the properties here.
I'd say they work with about 10 percent at most.
There's so much more stuff here that we almost never need to use.
And then sometime down the line something comes up and we have to do something we've never done before
.
We google it and we find out oh alright so that's what the uncured change property is for.
I had no idea.
And that's really what it's like to be a developer.
Up until now with javascript we've been working in a little bit of a small controlled world where we
learn about functions and objects we learn about variables.
And there's a finite number of ways of doing things and there's a very specific subset of knowledge
that you just need to know with the DOM.
Now we have this huge huge ecosystem to work in so many properties.
So I just want to reiterate there's so much here.
We're going to focus on the important pieces but the goal is not to memorize.
The goal is not to master every single property.
Again 10 percent at most is all that you need to be a competent web developer.
OK so let's go back and I just want to go over this one more time.
Summarize what we talked about.
So the DOM stands for document object model.
It's the interface between your javascript and your H.M.S..
It's how we can use our javascript to make things interactive.
It's how we do things like add a new element to the page or change the ref attribute of a link or change
the background image on our body or how we can get the value out of a form or we can do custom validations
and animations and interactive elements where you click in some code runs all these different possibilities
all stemmed from the fact that the document object model connects our javascript with their H.M.S. access
.
So the object model part of document object model tells us that it's a bunch of javascript objects that
are modeling elements in our H.T. amount.
So we have an ATAC here we end up with an object here representing that atec.
And then we end up with another object representing this H1 tag which we see over here.
Lastly it's called the document object model because everything lives inside of that one object called
the document.
It's the root node where everything else lives inside of.
So the next video we're going to start writing some code.