WEBVTT

00:00:00.000 --> 00:00:06.750
Going forward, you're going to hear 
me say a certain acronym a lot: DOM.

00:00:06.750 --> 00:00:09.978
Dom de dom dom dom

00:00:09.978 --> 00:00:15.502
DOM stands for 
Document Object Model,

00:00:15.502 --> 00:00:18.907
and it's the way that browsers 
let us developers

00:00:18.907 --> 00:00:21.637
manipulate webpages with JavaScript.

00:00:21.637 --> 00:00:26.726
Whenever a browser loads a webpage,
it parses all the HTML and CSS,

00:00:26.726 --> 00:00:30.236
and converts the document into a DOM.

00:00:30.236 --> 00:00:33.538
That DOM is really a 
big JavaScript object

00:00:33.538 --> 00:00:37.739
that contains everything we'd ever 
want to know or change about a page,

00:00:37.739 --> 00:00:43.201
like every single tag, and 
attribute and style for each tag.

00:00:43.201 --> 00:00:46.980
To access the DOM on a 
webpage from JavaScript,

00:00:46.980 --> 00:00:52.913
we use the global variable `document`,
and then we can use properties

00:00:52.913 --> 00:00:57.520
and call functions that 
are attached to this object here.

00:00:57.520 --> 00:01:04.226
The general strategy for 
DOM manipulation is two steps.

00:01:04.226 --> 00:01:09.309
Let me just make a list of them here.


00:01:09.309 --> 00:01:14.759
Here we go, and then we 
have the second step.

00:01:14.759 --> 00:01:17.823
Let's go through each 
of these steps now.

00:01:17.823 --> 00:01:23.493
So the first step is to find the DOM node
using an access method.

00:01:23.493 --> 00:01:28.969
If all we're looking for is the 
tag, we can access that really easily

00:01:28.969 --> 00:01:33.504
just by saying `document.body`.

00:01:33.504 --> 00:01:39.000
And now the second step is to 
manipulate the DOM node that we found

00:01:39.000 --> 00:01:43.386
by changing its attributes, 
styles, inner HTML,

00:01:43.386 --> 00:01:46.054
appending new nodes to it, ... .

00:01:46.054 --> 00:01:50.495
So if we just want to replace 
the contents of the whole tag,

00:01:50.495 --> 00:01:53.758
then we can use the 
`innerHTML` property.

00:01:53.758 --> 00:01:58.643
So `document.body.innerHTML = 
"Webpage be gone!";`

00:01:58.643 --> 00:02:01.758
Ta da, I did it.

00:02:01.758 --> 00:02:05.764
The browser is watching for 
changes to the document object,

00:02:05.764 --> 00:02:10.184
and as soon as it sees you change the 
innerHTML of document.body,

00:02:10.184 --> 00:02:13.450
it reflects it back in 
the actual document.

00:02:13.450 --> 00:02:17.778
Remember, the document object 
isn't the actual webpage,

00:02:17.778 --> 00:02:24.029
but the browser tries to make it reflect
the current page as much as possible.

00:02:24.029 --> 00:02:28.609
Now, there are a lot more
ways to do step one,

00:02:28.609 --> 00:02:32.794
because usually you want to find
something besides just the body tag.

00:02:32.794 --> 00:02:37.663
Maybe you want to find a tag with a 
certain ID, or all tags of a certain type--

00:02:37.663 --> 00:02:41.772
That's what we'll talk about in 
the DOM access methods tutorial.

00:02:41.772 --> 00:02:45.290
There's also a lot more cool stuff 
you can do in step two,

00:02:45.290 --> 00:02:49.135
like changing the attributes 
or styles of the tags you find.

00:02:49.135 --> 00:02:52.901
We'll talk about all that in the 
DOM modification tutorial.

00:02:52.901 --> 00:02:57.871
Once you've mastered DOM access and 
manipulation, we'll move on to fun ways

00:02:57.871 --> 00:03:02.735
to use it, like when responding to 
user events or making an animation.

00:03:02.735 --> 00:03:06.657
Right now, it is a little silly 
that we use JavaScript to do

00:03:06.657 --> 00:03:10.253
what we could have just done 
with HTML at the beginning,

00:03:10.253 --> 00:03:14.977
but trust me, you'll want to master 
DOM access and DOM modification

00:03:14.977 --> 00:03:18.893
so that you can make full 
interactive experiences later.

00:03:18.893 --> 00:03:25.277
So, keep it up, and see you soon.