0:00:01.287,0:00:07.387
I have this webpage "All about dogs,"[br]which is great, but actually,

0:00:07.387,0:00:12.583
and I know not everybody will agree [br]with me, I am more of a cats person,

0:00:12.583,0:00:17.178
and I would like to turn this [br]into a webpage "All about cats."

0:00:17.178,0:00:23.267
I'm going to use JavaScript to do it[br]instead of just modifying this HTML,

0:00:23.267,0:00:26.431
so that eventually, [br]I could maybe turn this

0:00:26.431,0:00:32.096
into a browser extension to turn [br]any webpage into being about cats.

0:00:32.096,0:00:37.450
Wouldn't that be amazing, [br]an entire internet about cats?

0:00:37.450,0:00:44.761
Now, this webpage has a heading, [br]a paragraph, and a couple images.

0:00:44.761,0:00:50.340
We're going to change each part [br]at a time, starting with the heading,

0:00:50.340,0:00:53.909
using the two steps that we just learned.

0:00:53.909,0:00:59.268
The first step is to find the DOM node [br]containing that heading.

0:00:59.268,0:01:06.895
The way that we found the DOM node [br]before was just document.body,

0:01:06.895,0:01:12.492
but now I want something much [br]more specific, I want just this h1.

0:01:12.492,0:01:14.700
Well, this h1 has an ID,

0:01:14.700,0:01:19.743
which means it should be the [br]only tag with that ID on the page,

0:01:19.743,0:01:24.980
and there's actually a really easy way [br]to find DOM nodes that have an ID,

0:01:24.980,0:01:30.342
a method on the document object [br]called getElementByID.

0:01:30.342,0:01:33.198
Let's use that down here [br]in the  tag,

0:01:33.198,0:01:38.527
starting off by declaring a variable [br]to store it in-- `var headingEl`--

0:01:38.527,0:01:42.299
I like to end my variable names [br]with El or Node,

0:01:42.299,0:01:47.390
so that I know they're storing an [br]element, which we also call a node.

0:01:47.390,0:01:52.743
Now we use the method. It's a method [br]attached to the global document object,

0:01:52.743,0:01:58.964
so we write `document`, [br]then dot, then `getElementByID`,

0:01:58.964,0:02:04.753
then parentheses because it's a function.[br]It won't find anything just like that,

0:02:04.753,0:02:07.733
because it doesn't know[br]what ID to look for.

0:02:07.733,0:02:12.011
Inside the parentheses we need to [br]pass it the ID that we're looking for

0:02:12.011,0:02:21.354
as a string in quotes. [br]So that is "heading".

0:02:21.354,0:02:24.098
How do we know [br]if we found the element

0:02:24.098,0:02:26.537
before we actually try manipulating it?

0:02:26.537,0:02:31.770
One way is to use the [br]console.log function.

0:02:31.770,0:02:36.202
Now, you can pause, and [br]pop open your developer tools.

0:02:36.202,0:02:40.896
Try the keyboard shortcut [br]command-option-i on the Mac,

0:02:40.896,0:02:48.029
or control-shift-i on Windows. [br]One of those usually works.

0:02:48.029,0:02:54.833
Did you see the h1 logged out in your [br]console? If so, yay, that means that

0:02:54.833,0:03:00.255
step one is complete. We found the [br]element and stored it in a variable.

0:03:00.255,0:03:06.359
For step two, let's manipulate the element[br]using the way that we already know,

0:03:06.359,0:03:10.679
changing the innerHTML. Let's see, [br]so that means we're going to say

0:03:10.679,0:03:17.627
`headingEl.innerHTML = `-- [br]dun-dun-dun, moment of truth--

0:03:17.627,0:03:22.721
`"All about cats"`. [br]There we go.

0:03:22.721,0:03:26.655
We have begun. [br]Catification has commenced.

0:03:26.655,0:03:32.320
Now, you're going to try doing something[br]just like that in the challenge.