Changing attributes (Video Version)

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.