[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.29,0:00:07.39,Default,,0000,0000,0000,,I have this webpage "All about dogs,"\Nwhich is great, but actually,
Dialogue: 0,0:00:07.39,0:00:12.58,Default,,0000,0000,0000,,and I know not everybody will agree \Nwith me, I am more of a cats person,
Dialogue: 0,0:00:12.58,0:00:17.18,Default,,0000,0000,0000,,and I would like to turn this \Ninto a webpage "All about cats."
Dialogue: 0,0:00:17.18,0:00:23.27,Default,,0000,0000,0000,,I'm going to use JavaScript to do it\Ninstead of just modifying this HTML,
Dialogue: 0,0:00:23.27,0:00:26.43,Default,,0000,0000,0000,,so that eventually, \NI could maybe turn this
Dialogue: 0,0:00:26.43,0:00:32.10,Default,,0000,0000,0000,,into a browser extension to turn \Nany webpage into being about cats.
Dialogue: 0,0:00:32.10,0:00:37.45,Default,,0000,0000,0000,,Wouldn't that be amazing, \Nan entire internet about cats?
Dialogue: 0,0:00:37.45,0:00:44.76,Default,,0000,0000,0000,,Now, this webpage has a heading, \Na paragraph, and a couple images.
Dialogue: 0,0:00:44.76,0:00:50.34,Default,,0000,0000,0000,,We're going to change each part \Nat a time, starting with the heading,
Dialogue: 0,0:00:50.34,0:00:53.91,Default,,0000,0000,0000,,using the two steps that we just learned.
Dialogue: 0,0:00:53.91,0:00:59.27,Default,,0000,0000,0000,,The first step is to find the DOM node \Ncontaining that heading.
Dialogue: 0,0:00:59.27,0:01:06.90,Default,,0000,0000,0000,,The way that we found the DOM node \Nbefore was just document.body,
Dialogue: 0,0:01:06.90,0:01:12.49,Default,,0000,0000,0000,,but now I want something much \Nmore specific, I want just this h1.
Dialogue: 0,0:01:12.49,0:01:14.70,Default,,0000,0000,0000,,Well, this h1 has an ID,
Dialogue: 0,0:01:14.70,0:01:19.74,Default,,0000,0000,0000,,which means it should be the \Nonly tag with that ID on the page,
Dialogue: 0,0:01:19.74,0:01:24.98,Default,,0000,0000,0000,,and there's actually a really easy way \Nto find DOM nodes that have an ID,
Dialogue: 0,0:01:24.98,0:01:30.34,Default,,0000,0000,0000,,a method on the document object \Ncalled getElementByID.
Dialogue: 0,0:01:30.34,0:01:33.20,Default,,0000,0000,0000,,Let's use that down here \Nin the  tag,
Dialogue: 0,0:01:33.20,0:01:38.53,Default,,0000,0000,0000,,starting off by declaring a variable \Nto store it in-- `var headingEl`--
Dialogue: 0,0:01:38.53,0:01:42.30,Default,,0000,0000,0000,,I like to end my variable names \Nwith El or Node,
Dialogue: 0,0:01:42.30,0:01:47.39,Default,,0000,0000,0000,,so that I know they're storing an \Nelement, which we also call a node.
Dialogue: 0,0:01:47.39,0:01:52.74,Default,,0000,0000,0000,,Now we use the method. It's a method \Nattached to the global document object,
Dialogue: 0,0:01:52.74,0:01:58.96,Default,,0000,0000,0000,,so we write `document`, \Nthen dot, then `getElementByID`,
Dialogue: 0,0:01:58.96,0:02:04.75,Default,,0000,0000,0000,,then parentheses because it's a function.\NIt won't find anything just like that,
Dialogue: 0,0:02:04.75,0:02:07.73,Default,,0000,0000,0000,,because it doesn't know\Nwhat ID to look for.
Dialogue: 0,0:02:07.73,0:02:12.01,Default,,0000,0000,0000,,Inside the parentheses we need to \Npass it the ID that we're looking for
Dialogue: 0,0:02:12.01,0:02:21.35,Default,,0000,0000,0000,,as a string in quotes. \NSo that is "heading".
Dialogue: 0,0:02:21.35,0:02:24.10,Default,,0000,0000,0000,,How do we know \Nif we found the element
Dialogue: 0,0:02:24.10,0:02:26.54,Default,,0000,0000,0000,,before we actually try manipulating it?
Dialogue: 0,0:02:26.54,0:02:31.77,Default,,0000,0000,0000,,One way is to use the \Nconsole.log function.
Dialogue: 0,0:02:31.77,0:02:36.20,Default,,0000,0000,0000,,Now, you can pause, and \Npop open your developer tools.
Dialogue: 0,0:02:36.20,0:02:40.90,Default,,0000,0000,0000,,Try the keyboard shortcut \Ncommand-option-i on the Mac,
Dialogue: 0,0:02:40.90,0:02:48.03,Default,,0000,0000,0000,,or control-shift-i on Windows. \NOne of those usually works.
Dialogue: 0,0:02:48.03,0:02:54.83,Default,,0000,0000,0000,,Did you see the h1 logged out in your \Nconsole? If so, yay, that means that
Dialogue: 0,0:02:54.83,0:03:00.26,Default,,0000,0000,0000,,step one is complete. We found the \Nelement and stored it in a variable.
Dialogue: 0,0:03:00.26,0:03:06.36,Default,,0000,0000,0000,,For step two, let's manipulate the element\Nusing the way that we already know,
Dialogue: 0,0:03:06.36,0:03:10.68,Default,,0000,0000,0000,,changing the innerHTML. Let's see, \Nso that means we're going to say
Dialogue: 0,0:03:10.68,0:03:17.63,Default,,0000,0000,0000,,`headingEl.innerHTML = `-- \Ndun-dun-dun, moment of truth--
Dialogue: 0,0:03:17.63,0:03:22.72,Default,,0000,0000,0000,,`"All about cats"`. \NThere we go.
Dialogue: 0,0:03:22.72,0:03:26.66,Default,,0000,0000,0000,,We have begun. \NCatification has commenced.
Dialogue: 0,0:03:26.66,0:03:32.32,Default,,0000,0000,0000,,Now, you're going to try doing something\Njust like that in the challenge.