I have this webpage "All about dogs,"
which is great, but actually,

and I know not everybody will agree 
with me, I am more of a cats person,

and I would like to turn this 
into a webpage "All about cats."

I'm going to use JavaScript to do it
instead of just modifying this HTML,

so that eventually, 
I could maybe turn this

into a browser extension to turn 
any webpage into being about cats.

Wouldn't that be amazing, 
an entire internet about cats?

Now, this webpage has a heading, 
a paragraph, and a couple images.

We're going to change each part 
at a time, starting with the heading,

using the two steps that we just learned.

The first step is to find the DOM node 
containing that heading.

The way that we found the DOM node 
before was just document.body,

but now I want something much 
more specific, I want just this h1.

Well, this h1 has an ID,

which means it should be the 
only tag with that ID on the page,

and there's actually a really easy way 
to find DOM nodes that have an ID,

a method on the document object 
called getElementByID.

Let's use that down here 
in the  tag,

starting off by declaring a variable 
to store it in-- `var headingEl`--

I like to end my variable names 
with El or Node,

so that I know they're storing an 
element, which we also call a node.

Now we use the method. It's a method 
attached to the global document object,

so we write `document`, 
then dot, then `getElementByID`,

then parentheses because it's a function.
It won't find anything just like that,

because it doesn't know
what ID to look for.

Inside the parentheses we need to 
pass it the ID that we're looking for

as a string in quotes. 
So that is "heading".

How do we know 
if we found the element

before we actually try manipulating it?

One way is to use the 
console.log function.

Now, you can pause, and 
pop open your developer tools.

Try the keyboard shortcut 
command-option-i on the Mac,

or control-shift-i on Windows. 
One of those usually works.

Did you see the h1 logged out in your 
console? If so, yay, that means that

step one is complete. We found the 
element and stored it in a variable.

For step two, let's manipulate the element
using the way that we already know,

changing the innerHTML. Let's see, 
so that means we're going to say

`headingEl.innerHTML = `-- 
dun-dun-dun, moment of truth--

`"All about cats"`. 
There we go.

We have begun. 
Catification has commenced.

Now, you're going to try doing something
just like that in the challenge.