WEBVTT

00:00:01.287 --> 00:00:07.387
I have this webpage "All about dogs,"
which is great, but actually,

00:00:07.387 --> 00:00:12.583
and I know not everybody will agree 
with me, I am more of a cats person,

00:00:12.583 --> 00:00:17.178
and I would like to turn this 
into a webpage "All about cats."

00:00:17.178 --> 00:00:23.267
I'm going to use JavaScript to do it
instead of just modifying this HTML,

00:00:23.267 --> 00:00:26.431
so that eventually, 
I could maybe turn this

00:00:26.431 --> 00:00:32.096
into a browser extension to turn 
any webpage into being about cats.

00:00:32.096 --> 00:00:37.450
Wouldn't that be amazing, 
an entire internet about cats?

00:00:37.450 --> 00:00:44.761
Now, this webpage has a heading, 
a paragraph, and a couple images.

00:00:44.761 --> 00:00:50.340
We're going to change each part 
at a time, starting with the heading,

00:00:50.340 --> 00:00:53.909
using the two steps that we just learned.

00:00:53.909 --> 00:00:59.268
The first step is to find the DOM node 
containing that heading.

00:00:59.268 --> 00:01:06.895
The way that we found the DOM node 
before was just document.body,

00:01:06.895 --> 00:01:12.492
but now I want something much 
more specific, I want just this h1.

00:01:12.492 --> 00:01:14.700
Well, this h1 has an ID,

00:01:14.700 --> 00:01:19.743
which means it should be the 
only tag with that ID on the page,

00:01:19.743 --> 00:01:24.980
and there's actually a really easy way 
to find DOM nodes that have an ID,

00:01:24.980 --> 00:01:30.342
a method on the document object 
called getElementByID.

00:01:30.342 --> 00:01:33.198
Let's use that down here 
in the  tag,

00:01:33.198 --> 00:01:38.527
starting off by declaring a variable 
to store it in-- `var headingEl`--

00:01:38.527 --> 00:01:42.299
I like to end my variable names 
with El or Node,

00:01:42.299 --> 00:01:47.390
so that I know they're storing an 
element, which we also call a node.

00:01:47.390 --> 00:01:52.743
Now we use the method. It's a method 
attached to the global document object,

00:01:52.743 --> 00:01:58.964
so we write `document`, 
then dot, then `getElementByID`,

00:01:58.964 --> 00:02:04.753
then parentheses because it's a function.
It won't find anything just like that,

00:02:04.753 --> 00:02:07.733
because it doesn't know
what ID to look for.

00:02:07.733 --> 00:02:12.011
Inside the parentheses we need to 
pass it the ID that we're looking for

00:02:12.011 --> 00:02:21.354
as a string in quotes. 
So that is "heading".

00:02:21.354 --> 00:02:24.098
How do we know 
if we found the element

00:02:24.098 --> 00:02:26.537
before we actually try manipulating it?

00:02:26.537 --> 00:02:31.770
One way is to use the 
console.log function.

00:02:31.770 --> 00:02:36.202
Now, you can pause, and 
pop open your developer tools.

00:02:36.202 --> 00:02:40.896
Try the keyboard shortcut 
command-option-i on the Mac,

00:02:40.896 --> 00:02:48.029
or control-shift-i on Windows. 
One of those usually works.

00:02:48.029 --> 00:02:54.833
Did you see the h1 logged out in your 
console? If so, yay, that means that

00:02:54.833 --> 00:03:00.255
step one is complete. We found the 
element and stored it in a variable.

00:03:00.255 --> 00:03:06.359
For step two, let's manipulate the element
using the way that we already know,

00:03:06.359 --> 00:03:10.679
changing the innerHTML. Let's see, 
so that means we're going to say

00:03:10.679 --> 00:03:17.627
`headingEl.innerHTML = `-- 
dun-dun-dun, moment of truth--

00:03:17.627 --> 00:03:22.721
`"All about cats"`. 
There we go.

00:03:22.721 --> 00:03:26.655
We have begun. 
Catification has commenced.

00:03:26.655 --> 00:03:32.320
Now, you're going to try doing something
just like that in the challenge.