WEBVTT

00:00:00.000 --> 00:00:06.440
I'm back with my webpage about dogs,
and I am very determined to use JavaScript

00:00:06.440 --> 00:00:11.888
and the DOM api to turn it into a 
webpage entirely about cats instead.

00:00:11.888 --> 00:00:17.464
There is an elephant in the room that I've
been ignoring. Well, actually, there's

00:00:17.464 --> 00:00:23.671
a dog in the room; two dogs, in fact-- 
these images. I can't have images

00:00:23.671 --> 00:00:29.478
of these adorable dogs on my page about
adorable cats. I need to change them.

00:00:29.487 --> 00:00:36.342
So, let's start by finding the images, 
using getElementsByTagName.

00:00:36.342 --> 00:00:47.869
`var imageEls = 
document.getElementsByTagName("img");`

00:00:47.869 --> 00:00:50.668
Now, since that returns multiple elements,

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.

00:00:54.725 --> 00:01:04.427
`var i = 0; i < imageEls.length; i++`

00:01:04.427 --> 00:01:11.456
But what do I put inside the for loop? 
I can't change image elements with

00:01:11.456 --> 00:01:18.755
innerHTML because image tags don't have 
an innerHTML. They're autoclosing tags.

00:01:18.755 --> 00:01:23.796
Instead, I need to change the thing about 
them that makes them look like dogs--

00:01:23.796 --> 00:01:27.176
the URL of the pictures, 
the thing that is specified

00:01:27.176 --> 00:01:30.721
with the src attribute 
in each of the tags.

00:01:30.721 --> 00:01:36.461
We can change attributes of elements 
using dot notation. Let me show you.

00:01:36.461 --> 00:01:43.179
First we access the current element with
bracket notation, and then we say dot

00:01:43.179 --> 00:01:50.653
and we put the HTML attribute name as the
JavaScript property name-- src-- equals

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.

00:01:54.841 --> 00:01:57.298
Notice the images went blank,

00:01:57.298 --> 00:02:01.672
since an empty string 
doesn't point at any image at all.

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

00:02:07.664 --> 00:02:13.022
and change the file name to cat, 
because I happen to know

00:02:13.022 --> 00:02:16.842
that that's the URL of the 
cat image on Khan Academy.

00:02:16.842 --> 00:02:23.404
Yay. The dogs are now cats, and 
our catification is mostly complete.

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

00:02:30.897 --> 00:02:36.827
there is one thing left-- the link to 
Wikipedia. It's going to the dogs page

00:02:36.827 --> 00:02:41.448
and if the viewer follows it, they're 
going to catch on to my nasty trick.

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?

00:02:47.347 --> 00:02:51.828
I could give this link an ID 
and use getElementById.

00:02:51.828 --> 00:02:57.096
Or I could use getElementsByTagName
and change all the links on the page.

00:02:57.096 --> 00:02:59.414
Or I could be really super fancy,

00:02:59.414 --> 00:03:06.657
and find only links that go to pages 
about dogs, using a CSS query selector.

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.

00:03:11.822 --> 00:03:15.946
So this CSS query is going to find all 
links that have to do with dogs.

00:03:15.946 --> 00:03:19.325
First I'm going to type `a`, 
'cause I'm just looking for links.

00:03:19.325 --> 00:03:26.041
Then I'm going to say `[href*="Dog"]`.

00:03:26.041 --> 00:03:31.950
So this tells CSS to match 
any link that has "Dog" in it.

00:03:31.950 --> 00:03:38.166
And then we'll set the color to purple. 
Ta da, it selected it.

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

00:03:43.566 --> 00:03:49.467
neat ways to use attribute selectors to
really dig deep into your document.

00:03:49.467 --> 00:03:58.041
So now to find that in JavaScript, we can 
use document.querySelectorAll, so I'll say

00:03:58.041 --> 00:04:07.992
`var linkEls = document.querySelectorAll`,
and then we can just go and paste in the

00:04:07.992 --> 00:04:12.580
selector that we just made, although 
we do have to make sure that

00:04:12.580 --> 00:04:22.695
we escape our double quotes. There we go.
So now it looks like a good string.

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--

00:04:27.558 --> 00:04:34.645
should be getting really used to 
doing these for loops-- and for each of

00:04:34.645 --> 00:04:41.642
them I want to change the link to the 
webpage about cats on Wikipedia.

00:04:41.642 --> 00:04:45.501
So I'm going to say `linkEls[i].href`--

00:04:45.501 --> 00:04:50.681
because that's the name of the attribute
that we're changing-- and then equals,

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,

00:05:00.113 --> 00:05:04.305
because I'm pretty sure 
that's the URL of that page.

00:05:04.305 --> 00:05:10.532
Ta da, world catination is complete.
But you are not done

00:05:10.532 --> 00:05:30.526
learning how to manipulate webpages 
with JavaScript, so stick around.