[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:06.44,Default,,0000,0000,0000,,I'm back with my webpage about dogs,\Nand I am very determined to use JavaScript
Dialogue: 0,0:00:06.44,0:00:11.89,Default,,0000,0000,0000,,and the DOM api to turn it into a \Nwebpage entirely about cats instead.
Dialogue: 0,0:00:11.89,0:00:17.46,Default,,0000,0000,0000,,There is an elephant in the room that I've\Nbeen ignoring. Well, actually, there's
Dialogue: 0,0:00:17.46,0:00:23.67,Default,,0000,0000,0000,,a dog in the room; two dogs, in fact-- \Nthese images. I can't have images
Dialogue: 0,0:00:23.67,0:00:29.48,Default,,0000,0000,0000,,of these adorable dogs on my page about\Nadorable cats. I need to change them.
Dialogue: 0,0:00:29.49,0:00:36.34,Default,,0000,0000,0000,,So, let's start by finding the images, \Nusing getElementsByTagName.
Dialogue: 0,0:00:36.34,0:00:47.87,Default,,0000,0000,0000,,`var imageEls = \Ndocument.getElementsByTagName("img");`
Dialogue: 0,0:00:47.87,0:00:50.67,Default,,0000,0000,0000,,Now, since that returns multiple elements,
Dialogue: 0,0:00:50.67,0:00:54.72,Default,,0000,0000,0000,,we need to use a for loop to iterate \Nthrough them, so I'll set that up.
Dialogue: 0,0:00:54.72,0:01:04.43,Default,,0000,0000,0000,,`var i = 0; i < imageEls.length; i++`
Dialogue: 0,0:01:04.43,0:01:11.46,Default,,0000,0000,0000,,But what do I put inside the for loop? \NI can't change image elements with
Dialogue: 0,0:01:11.46,0:01:18.76,Default,,0000,0000,0000,,innerHTML because image tags don't have \Nan innerHTML. They're autoclosing tags.
Dialogue: 0,0:01:18.76,0:01:23.80,Default,,0000,0000,0000,,Instead, I need to change the thing about \Nthem that makes them look like dogs--
Dialogue: 0,0:01:23.80,0:01:27.18,Default,,0000,0000,0000,,the URL of the pictures, \Nthe thing that is specified
Dialogue: 0,0:01:27.18,0:01:30.72,Default,,0000,0000,0000,,with the src attribute \Nin each of the tags.
Dialogue: 0,0:01:30.72,0:01:36.46,Default,,0000,0000,0000,,We can change attributes of elements \Nusing dot notation. Let me show you.
Dialogue: 0,0:01:36.46,0:01:43.18,Default,,0000,0000,0000,,First we access the current element with\Nbracket notation, and then we say dot
Dialogue: 0,0:01:43.18,0:01:50.65,Default,,0000,0000,0000,,and we put the HTML attribute name as the\NJavaScript property name-- src-- equals
Dialogue: 0,0:01:50.65,0:01:54.84,Default,,0000,0000,0000,,and then we set it to some new value; \Nand I'll just put an empty string.
Dialogue: 0,0:01:54.84,0:01:57.30,Default,,0000,0000,0000,,Notice the images went blank,
Dialogue: 0,0:01:57.30,0:02:01.67,Default,,0000,0000,0000,,since an empty string \Ndoesn't point at any image at all.
Dialogue: 0,0:02:01.67,0:02:07.66,Default,,0000,0000,0000,,To figure out what this new URL should be,\NI'm going to paste the old URL here
Dialogue: 0,0:02:07.66,0:02:13.02,Default,,0000,0000,0000,,and change the file name to cat, \Nbecause I happen to know
Dialogue: 0,0:02:13.02,0:02:16.84,Default,,0000,0000,0000,,that that's the URL of the \Ncat image on Khan Academy.
Dialogue: 0,0:02:16.84,0:02:23.40,Default,,0000,0000,0000,,Yay. The dogs are now cats, and \Nour catification is mostly complete.
Dialogue: 0,0:02:23.40,0:02:30.90,Default,,0000,0000,0000,,Do you see anything else that still has to\Ndo with dogs? It's really subtle, but
Dialogue: 0,0:02:30.90,0:02:36.83,Default,,0000,0000,0000,,there is one thing left-- the link to \NWikipedia. It's going to the dogs page
Dialogue: 0,0:02:36.83,0:02:41.45,Default,,0000,0000,0000,,and if the viewer follows it, they're \Ngoing to catch on to my nasty trick.
Dialogue: 0,0:02:41.45,0:02:47.35,Default,,0000,0000,0000,,So I want to send them to cats instead. \NHow should I find that link in JavaScript?
Dialogue: 0,0:02:47.35,0:02:51.83,Default,,0000,0000,0000,,I could give this link an ID \Nand use getElementById.
Dialogue: 0,0:02:51.83,0:02:57.10,Default,,0000,0000,0000,,Or I could use getElementsByTagName\Nand change all the links on the page.
Dialogue: 0,0:02:57.10,0:02:59.41,Default,,0000,0000,0000,,Or I could be really super fancy,
Dialogue: 0,0:02:59.41,0:03:06.66,Default,,0000,0000,0000,,and find only links that go to pages \Nabout dogs, using a CSS query selector.
Dialogue: 0,0:03:06.66,0:03:11.82,Default,,0000,0000,0000,,Let me show you the CSS query that I want\Nto do up here in the  tag first.
Dialogue: 0,0:03:11.82,0:03:15.95,Default,,0000,0000,0000,,So this CSS query is going to find all \Nlinks that have to do with dogs.
Dialogue: 0,0:03:15.95,0:03:19.32,Default,,0000,0000,0000,,First I'm going to type `a`, \N'cause I'm just looking for links.
Dialogue: 0,0:03:19.32,0:03:26.04,Default,,0000,0000,0000,,Then I'm going to say `[href*="Dog"]`.
Dialogue: 0,0:03:26.04,0:03:31.95,Default,,0000,0000,0000,,So this tells CSS to match \Nany link that has "Dog" in it.
Dialogue: 0,0:03:31.95,0:03:38.17,Default,,0000,0000,0000,,And then we'll set the color to purple. \NTa da, it selected it.
Dialogue: 0,0:03:38.17,0:03:43.57,Default,,0000,0000,0000,,So, that's pretty neat, and this is an \Nattribute selector, and there's a lot of
Dialogue: 0,0:03:43.57,0:03:49.47,Default,,0000,0000,0000,,neat ways to use attribute selectors to\Nreally dig deep into your document.
Dialogue: 0,0:03:49.47,0:03:58.04,Default,,0000,0000,0000,,So now to find that in JavaScript, we can \Nuse document.querySelectorAll, so I'll say
Dialogue: 0,0:03:58.04,0:04:07.99,Default,,0000,0000,0000,,`var linkEls = document.querySelectorAll`,\Nand then we can just go and paste in the
Dialogue: 0,0:04:07.99,0:04:12.58,Default,,0000,0000,0000,,selector that we just made, although \Nwe do have to make sure that
Dialogue: 0,0:04:12.58,0:04:22.70,Default,,0000,0000,0000,,we escape our double quotes. There we go.\NSo now it looks like a good string.
Dialogue: 0,0:04:22.70,0:04:27.56,Default,,0000,0000,0000,,And now I need to iterate through these, \Nso once again we just do our for loop--
Dialogue: 0,0:04:27.56,0:04:34.64,Default,,0000,0000,0000,,should be getting really used to \Ndoing these for loops-- and for each of
Dialogue: 0,0:04:34.64,0:04:41.64,Default,,0000,0000,0000,,them I want to change the link to the \Nwebpage about cats on Wikipedia.
Dialogue: 0,0:04:41.64,0:04:45.50,Default,,0000,0000,0000,,So I'm going to say `linkEls[i].href`--
Dialogue: 0,0:04:45.50,0:04:50.68,Default,,0000,0000,0000,,because that's the name of the attribute\Nthat we're changing-- and then equals,
Dialogue: 0,0:04:50.68,0:05:00.11,Default,,0000,0000,0000,,then I'll go find this URL and paste it \Ndown here and just change it to cat,
Dialogue: 0,0:05:00.11,0:05:04.30,Default,,0000,0000,0000,,because I'm pretty sure \Nthat's the URL of that page.
Dialogue: 0,0:05:04.30,0:05:10.53,Default,,0000,0000,0000,,Ta da, world catination is complete.\NBut you are not done
Dialogue: 0,0:05:10.53,0:05:30.53,Default,,0000,0000,0000,,learning how to manipulate webpages \Nwith JavaScript, so stick around.