I'm back with my webpage about dogs,
and I am very determined to use JavaScript

and the DOM api to turn it into a 
webpage entirely about cats instead.

There is an elephant in the room that I've
been ignoring. Well, actually, there's

a dog in the room; two dogs, in fact-- 
these images. I can't have images

of these adorable dogs on my page about
adorable cats. I need to change them.

So, let's start by finding the images, 
using getElementsByTagName.

`var imageEls = 
document.getElementsByTagName("img");`

Now, since that returns multiple elements,

we need to use a for loop to iterate 
through them, so I'll set that up.

`var i = 0; i < imageEls.length; i++`

But what do I put inside the for loop? 
I can't change image elements with

innerHTML because image tags don't have 
an innerHTML. They're autoclosing tags.

Instead, I need to change the thing about 
them that makes them look like dogs--

the URL of the pictures, 
the thing that is specified

with the src attribute 
in each of the tags.

We can change attributes of elements 
using dot notation. Let me show you.

First we access the current element with
bracket notation, and then we say dot

and we put the HTML attribute name as the
JavaScript property name-- src-- equals

and then we set it to some new value; 
and I'll just put an empty string.

Notice the images went blank,

since an empty string 
doesn't point at any image at all.

To figure out what this new URL should be,
I'm going to paste the old URL here

and change the file name to cat, 
because I happen to know

that that's the URL of the 
cat image on Khan Academy.

Yay. The dogs are now cats, and 
our catification is mostly complete.

Do you see anything else that still has to
do with dogs? It's really subtle, but

there is one thing left-- the link to 
Wikipedia. It's going to the dogs page

and if the viewer follows it, they're 
going to catch on to my nasty trick.

So I want to send them to cats instead. 
How should I find that link in JavaScript?

I could give this link an ID 
and use getElementById.

Or I could use getElementsByTagName
and change all the links on the page.

Or I could be really super fancy,

and find only links that go to pages 
about dogs, using a CSS query selector.

Let me show you the CSS query that I want
to do up here in the  tag first.

So this CSS query is going to find all 
links that have to do with dogs.

First I'm going to type `a`, 
'cause I'm just looking for links.

Then I'm going to say `[href*="Dog"]`.

So this tells CSS to match 
any link that has "Dog" in it.

And then we'll set the color to purple. 
Ta da, it selected it.

So, that's pretty neat, and this is an 
attribute selector, and there's a lot of

neat ways to use attribute selectors to
really dig deep into your document.

So now to find that in JavaScript, we can 
use document.querySelectorAll, so I'll say

`var linkEls = document.querySelectorAll`,
and then we can just go and paste in the

selector that we just made, although 
we do have to make sure that

we escape our double quotes. There we go.
So now it looks like a good string.

And now I need to iterate through these, 
so once again we just do our for loop--

should be getting really used to 
doing these for loops-- and for each of

them I want to change the link to the 
webpage about cats on Wikipedia.

So I'm going to say `linkEls[i].href`--

because that's the name of the attribute
that we're changing-- and then equals,

then I'll go find this URL and paste it 
down here and just change it to cat,

because I'm pretty sure 
that's the URL of that page.

Ta da, world catination is complete.
But you are not done

learning how to manipulate webpages 
with JavaScript, so stick around.