1
00:00:01,287 --> 00:00:07,387
I have this webpage "All about dogs,"
which is great, but actually,

2
00:00:07,387 --> 00:00:12,583
and I know not everybody will agree 
with me, I am more of a cats person,

3
00:00:12,583 --> 00:00:17,178
and I would like to turn this 
into a webpage "All about cats."

4
00:00:17,178 --> 00:00:23,267
I'm going to use JavaScript to do it
instead of just modifying this HTML,

5
00:00:23,267 --> 00:00:26,431
so that eventually, 
I could maybe turn this

6
00:00:26,431 --> 00:00:32,096
into a browser extension to turn 
any webpage into being about cats.

7
00:00:32,096 --> 00:00:37,450
Wouldn't that be amazing, 
an entire internet about cats?

8
00:00:37,450 --> 00:00:44,761
Now, this webpage has a heading, 
a paragraph, and a couple images.

9
00:00:44,761 --> 00:00:50,340
We're going to change each part 
at a time, starting with the heading,

10
00:00:50,340 --> 00:00:53,909
using the two steps that we just learned.

11
00:00:53,909 --> 00:00:59,268
The first step is to find the DOM node 
containing that heading.

12
00:00:59,268 --> 00:01:06,895
The way that we found the DOM node 
before was just document.body,

13
00:01:06,895 --> 00:01:12,492
but now I want something much 
more specific, I want just this h1.

14
00:01:12,492 --> 00:01:14,700
Well, this h1 has an ID,

15
00:01:14,700 --> 00:01:19,743
which means it should be the 
only tag with that ID on the page,

16
00:01:19,743 --> 00:01:24,980
and there's actually a really easy way 
to find DOM nodes that have an ID,

17
00:01:24,980 --> 00:01:30,342
a method on the document object 
called getElementByID.

18
00:01:30,342 --> 00:01:33,198
Let's use that down here 
in the  tag,

19
00:01:33,198 --> 00:01:38,527
starting off by declaring a variable 
to store it in-- `var headingEl`--

20
00:01:38,527 --> 00:01:42,299
I like to end my variable names 
with El or Node,

21
00:01:42,299 --> 00:01:47,390
so that I know they're storing an 
element, which we also call a node.

22
00:01:47,390 --> 00:01:52,743
Now we use the method. It's a method 
attached to the global document object,

23
00:01:52,743 --> 00:01:58,964
so we write `document`, 
then dot, then `getElementByID`,

24
00:01:58,964 --> 00:02:04,753
then parentheses because it's a function.
It won't find anything just like that,

25
00:02:04,753 --> 00:02:07,733
because it doesn't know
what ID to look for.

26
00:02:07,733 --> 00:02:12,011
Inside the parentheses we need to 
pass it the ID that we're looking for

27
00:02:12,011 --> 00:02:21,354
as a string in quotes. 
So that is "heading".

28
00:02:21,354 --> 00:02:24,098
How do we know 
if we found the element

29
00:02:24,098 --> 00:02:26,537
before we actually try manipulating it?

30
00:02:26,537 --> 00:02:31,770
One way is to use the 
console.log function.

31
00:02:31,770 --> 00:02:36,202
Now, you can pause, and 
pop open your developer tools.

32
00:02:36,202 --> 00:02:40,896
Try the keyboard shortcut 
command-option-i on the Mac,

33
00:02:40,896 --> 00:02:48,029
or control-shift-i on Windows. 
One of those usually works.

34
00:02:48,029 --> 00:02:54,833
Did you see the h1 logged out in your 
console? If so, yay, that means that

35
00:02:54,833 --> 00:03:00,255
step one is complete. We found the 
element and stored it in a variable.

36
00:03:00,255 --> 00:03:06,359
For step two, let's manipulate the element
using the way that we already know,

37
00:03:06,359 --> 00:03:10,679
changing the innerHTML. Let's see, 
so that means we're going to say

38
00:03:10,679 --> 00:03:17,627
`headingEl.innerHTML = `-- 
dun-dun-dun, moment of truth--

39
00:03:17,627 --> 00:03:22,721
`"All about cats"`. 
There we go.

40
00:03:22,721 --> 00:03:26,655
We have begun. 
Catification has commenced.

41
00:03:26,655 --> 00:03:32,320
Now, you're going to try doing something
just like that in the challenge.