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.