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.