1 00:00:00,000 --> 00:00:06,440 I'm back with my webpage about dogs, and I am very determined to use JavaScript 2 00:00:06,440 --> 00:00:11,888 and the DOM api to turn it into a webpage entirely about cats instead. 3 00:00:11,888 --> 00:00:17,464 There is an elephant in the room that I've been ignoring. Well, actually, there's 4 00:00:17,464 --> 00:00:23,671 a dog in the room; two dogs, in fact-- these images. I can't have images 5 00:00:23,671 --> 00:00:29,478 of these adorable dogs on my page about adorable cats. I need to change them. 6 00:00:29,487 --> 00:00:36,342 So, let's start by finding the images, using getElementsByTagName. 7 00:00:36,342 --> 00:00:47,869 `var imageEls = document.getElementsByTagName("img");` 8 00:00:47,869 --> 00:00:50,668 Now, since that returns multiple elements, 9 00:00:50,668 --> 00:00:54,725 we need to use a for loop to iterate through them, so I'll set that up. 10 00:00:54,725 --> 00:01:04,427 `var i = 0; i < imageEls.length; i++` 11 00:01:04,427 --> 00:01:11,456 But what do I put inside the for loop? I can't change image elements with 12 00:01:11,456 --> 00:01:18,755 innerHTML because image tags don't have an innerHTML. They're autoclosing tags. 13 00:01:18,755 --> 00:01:23,796 Instead, I need to change the thing about them that makes them look like dogs-- 14 00:01:23,796 --> 00:01:27,176 the URL of the pictures, the thing that is specified 15 00:01:27,176 --> 00:01:30,721 with the src attribute in each of the tags. 16 00:01:30,721 --> 00:01:36,461 We can change attributes of elements using dot notation. Let me show you. 17 00:01:36,461 --> 00:01:43,179 First we access the current element with bracket notation, and then we say dot 18 00:01:43,179 --> 00:01:50,653 and we put the HTML attribute name as the JavaScript property name-- src-- equals 19 00:01:50,653 --> 00:01:54,841 and then we set it to some new value; and I'll just put an empty string. 20 00:01:54,841 --> 00:01:57,298 Notice the images went blank, 21 00:01:57,298 --> 00:02:01,672 since an empty string doesn't point at any image at all. 22 00:02:01,672 --> 00:02:07,664 To figure out what this new URL should be, I'm going to paste the old URL here 23 00:02:07,664 --> 00:02:13,022 and change the file name to cat, because I happen to know 24 00:02:13,022 --> 00:02:16,842 that that's the URL of the cat image on Khan Academy. 25 00:02:16,842 --> 00:02:23,404 Yay. The dogs are now cats, and our catification is mostly complete. 26 00:02:23,404 --> 00:02:30,897 Do you see anything else that still has to do with dogs? It's really subtle, but 27 00:02:30,897 --> 00:02:36,827 there is one thing left-- the link to Wikipedia. It's going to the dogs page 28 00:02:36,827 --> 00:02:41,448 and if the viewer follows it, they're going to catch on to my nasty trick. 29 00:02:41,448 --> 00:02:47,347 So I want to send them to cats instead. How should I find that link in JavaScript? 30 00:02:47,347 --> 00:02:51,828 I could give this link an ID and use getElementById. 31 00:02:51,828 --> 00:02:57,096 Or I could use getElementsByTagName and change all the links on the page. 32 00:02:57,096 --> 00:02:59,414 Or I could be really super fancy, 33 00:02:59,414 --> 00:03:06,657 and find only links that go to pages about dogs, using a CSS query selector. 34 00:03:06,657 --> 00:03:11,822 Let me show you the CSS query that I want to do up here in the tag first. 35 00:03:11,822 --> 00:03:15,946 So this CSS query is going to find all links that have to do with dogs. 36 00:03:15,946 --> 00:03:19,325 First I'm going to type `a`, 'cause I'm just looking for links. 37 00:03:19,325 --> 00:03:26,041 Then I'm going to say `[href*="Dog"]`. 38 00:03:26,041 --> 00:03:31,950 So this tells CSS to match any link that has "Dog" in it. 39 00:03:31,950 --> 00:03:38,166 And then we'll set the color to purple. Ta da, it selected it. 40 00:03:38,166 --> 00:03:43,566 So, that's pretty neat, and this is an attribute selector, and there's a lot of 41 00:03:43,566 --> 00:03:49,467 neat ways to use attribute selectors to really dig deep into your document. 42 00:03:49,467 --> 00:03:58,041 So now to find that in JavaScript, we can use document.querySelectorAll, so I'll say 43 00:03:58,041 --> 00:04:07,992 `var linkEls = document.querySelectorAll`, and then we can just go and paste in the 44 00:04:07,992 --> 00:04:12,580 selector that we just made, although we do have to make sure that 45 00:04:12,580 --> 00:04:22,695 we escape our double quotes. There we go. So now it looks like a good string. 46 00:04:22,695 --> 00:04:27,558 And now I need to iterate through these, so once again we just do our for loop-- 47 00:04:27,558 --> 00:04:34,645 should be getting really used to doing these for loops-- and for each of 48 00:04:34,645 --> 00:04:41,642 them I want to change the link to the webpage about cats on Wikipedia. 49 00:04:41,642 --> 00:04:45,501 So I'm going to say `linkEls[i].href`-- 50 00:04:45,501 --> 00:04:50,681 because that's the name of the attribute that we're changing-- and then equals, 51 00:04:50,681 --> 00:05:00,113 then I'll go find this URL and paste it down here and just change it to cat, 52 00:05:00,113 --> 00:05:04,305 because I'm pretty sure that's the URL of that page. 53 00:05:04,305 --> 00:05:10,532 Ta da, world catination is complete. But you are not done 54 00:05:10,532 --> 00:05:30,526 learning how to manipulate webpages with JavaScript, so stick around.