Finding elements by Id (Video version)

This is a video recording of a talk-through, uploaded to make it easier to create subtitles. Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code and see the code in better resolution: http://www.khanacademy.org/computer-programming

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.