0:00:00.000,0:00:06.440 I'm back with my webpage about dogs,[br]and I am very determined to use JavaScript 0:00:06.440,0:00:11.888 and the DOM api to turn it into a [br]webpage entirely about cats instead. 0:00:11.888,0:00:17.464 There is an elephant in the room that I've[br]been ignoring. Well, actually, there's 0:00:17.464,0:00:23.671 a dog in the room; two dogs, in fact-- [br]these images. I can't have images 0:00:23.671,0:00:29.478 of these adorable dogs on my page about[br]adorable cats. I need to change them. 0:00:29.487,0:00:36.342 So, let's start by finding the images, [br]using getElementsByTagName. 0:00:36.342,0:00:47.869 `var imageEls = [br]document.getElementsByTagName("img");` 0:00:47.869,0:00:50.668 Now, since that returns multiple elements, 0:00:50.668,0:00:54.725 we need to use a for loop to iterate [br]through them, so I'll set that up. 0:00:54.725,0:01:04.427 `var i = 0; i < imageEls.length; i++` 0:01:04.427,0:01:11.456 But what do I put inside the for loop? [br]I can't change image elements with 0:01:11.456,0:01:18.755 innerHTML because image tags don't have [br]an innerHTML. They're autoclosing tags. 0:01:18.755,0:01:23.796 Instead, I need to change the thing about [br]them that makes them look like dogs-- 0:01:23.796,0:01:27.176 the URL of the pictures, [br]the thing that is specified 0:01:27.176,0:01:30.721 with the src attribute [br]in each of the tags. 0:01:30.721,0:01:36.461 We can change attributes of elements [br]using dot notation. Let me show you. 0:01:36.461,0:01:43.179 First we access the current element with[br]bracket notation, and then we say dot 0:01:43.179,0:01:50.653 and we put the HTML attribute name as the[br]JavaScript property name-- src-- equals 0:01:50.653,0:01:54.841 and then we set it to some new value; [br]and I'll just put an empty string. 0:01:54.841,0:01:57.298 Notice the images went blank, 0:01:57.298,0:02:01.672 since an empty string [br]doesn't point at any image at all. 0:02:01.672,0:02:07.664 To figure out what this new URL should be,[br]I'm going to paste the old URL here 0:02:07.664,0:02:13.022 and change the file name to cat, [br]because I happen to know 0:02:13.022,0:02:16.842 that that's the URL of the [br]cat image on Khan Academy. 0:02:16.842,0:02:23.404 Yay. The dogs are now cats, and [br]our catification is mostly complete. 0:02:23.404,0:02:30.897 Do you see anything else that still has to[br]do with dogs? It's really subtle, but 0:02:30.897,0:02:36.827 there is one thing left-- the link to [br]Wikipedia. It's going to the dogs page 0:02:36.827,0:02:41.448 and if the viewer follows it, they're [br]going to catch on to my nasty trick. 0:02:41.448,0:02:47.347 So I want to send them to cats instead. [br]How should I find that link in JavaScript? 0:02:47.347,0:02:51.828 I could give this link an ID [br]and use getElementById. 0:02:51.828,0:02:57.096 Or I could use getElementsByTagName[br]and change all the links on the page. 0:02:57.096,0:02:59.414 Or I could be really super fancy, 0:02:59.414,0:03:06.657 and find only links that go to pages [br]about dogs, using a CSS query selector. 0:03:06.657,0:03:11.822 Let me show you the CSS query that I want[br]to do up here in the tag first. 0:03:11.822,0:03:15.946 So this CSS query is going to find all [br]links that have to do with dogs. 0:03:15.946,0:03:19.325 First I'm going to type `a`, [br]'cause I'm just looking for links. 0:03:19.325,0:03:26.041 Then I'm going to say `[href*="Dog"]`. 0:03:26.041,0:03:31.950 So this tells CSS to match [br]any link that has "Dog" in it. 0:03:31.950,0:03:38.166 And then we'll set the color to purple. [br]Ta da, it selected it. 0:03:38.166,0:03:43.566 So, that's pretty neat, and this is an [br]attribute selector, and there's a lot of 0:03:43.566,0:03:49.467 neat ways to use attribute selectors to[br]really dig deep into your document. 0:03:49.467,0:03:58.041 So now to find that in JavaScript, we can [br]use document.querySelectorAll, so I'll say 0:03:58.041,0:04:07.992 `var linkEls = document.querySelectorAll`,[br]and then we can just go and paste in the 0:04:07.992,0:04:12.580 selector that we just made, although [br]we do have to make sure that 0:04:12.580,0:04:22.695 we escape our double quotes. There we go.[br]So now it looks like a good string. 0:04:22.695,0:04:27.558 And now I need to iterate through these, [br]so once again we just do our for loop-- 0:04:27.558,0:04:34.645 should be getting really used to [br]doing these for loops-- and for each of 0:04:34.645,0:04:41.642 them I want to change the link to the [br]webpage about cats on Wikipedia. 0:04:41.642,0:04:45.501 So I'm going to say `linkEls[i].href`-- 0:04:45.501,0:04:50.681 because that's the name of the attribute[br]that we're changing-- and then equals, 0:04:50.681,0:05:00.113 then I'll go find this URL and paste it [br]down here and just change it to cat, 0:05:00.113,0:05:04.305 because I'm pretty sure [br]that's the URL of that page. 0:05:04.305,0:05:10.532 Ta da, world catination is complete.[br]But you are not done 0:05:10.532,0:05:30.526 learning how to manipulate webpages [br]with JavaScript, so stick around.