0:00:00.000,0:00:06.750
Going forward, you're going to hear [br]me say a certain acronym a lot: DOM.

0:00:06.750,0:00:09.978
Dom de dom dom dom

0:00:09.978,0:00:15.502
DOM stands for [br]Document Object Model,

0:00:15.502,0:00:18.907
and it's the way that browsers [br]let us developers

0:00:18.907,0:00:21.637
manipulate webpages with JavaScript.

0:00:21.637,0:00:26.726
Whenever a browser loads a webpage,[br]it parses all the HTML and CSS,

0:00:26.726,0:00:30.236
and converts the document into a DOM.

0:00:30.236,0:00:33.538
That DOM is really a [br]big JavaScript object

0:00:33.538,0:00:37.739
that contains everything we'd ever [br]want to know or change about a page,

0:00:37.739,0:00:43.201
like every single tag, and [br]attribute and style for each tag.

0:00:43.201,0:00:46.980
To access the DOM on a [br]webpage from JavaScript,

0:00:46.980,0:00:52.913
we use the global variable `document`,[br]and then we can use properties

0:00:52.913,0:00:57.520
and call functions that [br]are attached to this object here.

0:00:57.520,0:01:04.226
The general strategy for [br]DOM manipulation is two steps.

0:01:04.226,0:01:09.309
Let me just make a list of them here.[br]

0:01:09.309,0:01:14.759
Here we go, and then we [br]have the second step.

0:01:14.759,0:01:17.823
Let's go through each [br]of these steps now.

0:01:17.823,0:01:23.493
So the first step is to find the DOM node[br]using an access method.

0:01:23.493,0:01:28.969
If all we're looking for is the [br]tag, we can access that really easily

0:01:28.969,0:01:33.504
just by saying `document.body`.

0:01:33.504,0:01:39.000
And now the second step is to [br]manipulate the DOM node that we found

0:01:39.000,0:01:43.386
by changing its attributes, [br]styles, inner HTML,

0:01:43.386,0:01:46.054
appending new nodes to it, ... .

0:01:46.054,0:01:50.495
So if we just want to replace [br]the contents of the whole tag,

0:01:50.495,0:01:53.758
then we can use the [br]`innerHTML` property.

0:01:53.758,0:01:58.643
So `document.body.innerHTML = [br]"Webpage be gone!";`

0:01:58.643,0:02:01.758
Ta da, I did it.

0:02:01.758,0:02:05.764
The browser is watching for [br]changes to the document object,

0:02:05.764,0:02:10.184
and as soon as it sees you change the [br]innerHTML of document.body,

0:02:10.184,0:02:13.450
it reflects it back in [br]the actual document.

0:02:13.450,0:02:17.778
Remember, the document object [br]isn't the actual webpage,

0:02:17.778,0:02:24.029
but the browser tries to make it reflect[br]the current page as much as possible.

0:02:24.029,0:02:28.609
Now, there are a lot more[br]ways to do step one,

0:02:28.609,0:02:32.794
because usually you want to find[br]something besides just the body tag.

0:02:32.794,0:02:37.663
Maybe you want to find a tag with a [br]certain ID, or all tags of a certain type--

0:02:37.663,0:02:41.772
That's what we'll talk about in [br]the DOM access methods tutorial.

0:02:41.772,0:02:45.290
There's also a lot more cool stuff [br]you can do in step two,

0:02:45.290,0:02:49.135
like changing the attributes [br]or styles of the tags you find.

0:02:49.135,0:02:52.901
We'll talk about all that in the [br]DOM modification tutorial.

0:02:52.901,0:02:57.871
Once you've mastered DOM access and [br]manipulation, we'll move on to fun ways

0:02:57.871,0:03:02.735
to use it, like when responding to [br]user events or making an animation.

0:03:02.735,0:03:06.657
Right now, it is a little silly [br]that we use JavaScript to do

0:03:06.657,0:03:10.253
what we could have just done [br]with HTML at the beginning,

0:03:10.253,0:03:14.977
but trust me, you'll want to master [br]DOM access and DOM modification

0:03:14.977,0:03:18.893
so that you can make full [br]interactive experiences later.

0:03:18.893,0:03:25.277
So, keep it up, and see you soon.