The DOM (Video Version)

This is a video recording of a talk-through, uploaded to make it easier to create subtitles.
Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code
and see the code in better resolution:
http://www.khanacademy.org/computer-programming

Going forward, you're going to hear
me say a certain acronym a lot: DOM.

Dom de dom dom dom

DOM stands for
Document Object Model,

and it's the way that browsers
let us developers

manipulate webpages with JavaScript.

Whenever a browser loads a webpage,
it parses all the HTML and CSS,

and converts the document into a DOM.

That DOM is really a
big JavaScript object

that contains everything we'd ever
want to know or change about a page,

like every single tag, and
attribute and style for each tag.

To access the DOM on a
webpage from JavaScript,

we use the global variable `document`,
and then we can use properties

and call functions that
are attached to this object here.

The general strategy for
DOM manipulation is two steps.

Let me just make a list of them here.

Here we go, and then we
have the second step.

Let's go through each
of these steps now.

So the first step is to find the DOM node
using an access method.

If all we're looking for is the
tag, we can access that really easily

just by saying `document.body`.

And now the second step is to
manipulate the DOM node that we found

by changing its attributes,
styles, inner HTML,

appending new nodes to it, ... .

So if we just want to replace
the contents of the whole tag,

then we can use the
`innerHTML` property.

So `document.body.innerHTML =
"Webpage be gone!";`

Ta da, I did it.

The browser is watching for
changes to the document object,

and as soon as it sees you change the
innerHTML of document.body,

it reflects it back in
the actual document.

Remember, the document object
isn't the actual webpage,

but the browser tries to make it reflect
the current page as much as possible.

Now, there are a lot more
ways to do step one,

because usually you want to find
something besides just the body tag.

Maybe you want to find a tag with a
certain ID, or all tags of a certain type--

That's what we'll talk about in
the DOM access methods tutorial.

There's also a lot more cool stuff
you can do in step two,

like changing the attributes
or styles of the tags you find.

We'll talk about all that in the
DOM modification tutorial.

Once you've mastered DOM access and
manipulation, we'll move on to fun ways

to use it, like when responding to
user events or making an animation.

Right now, it is a little silly
that we use JavaScript to do

what we could have just done
with HTML at the beginning,

but trust me, you'll want to master
DOM access and DOM modification

so that you can make full
interactive experiences later.

So, keep it up, and see you soon.