OK welcome back.
So this video is going to be a little bit different.
We're not going introduce any new ways of manipulating the dom but we're going to take what we've learned
and do a little bit of a code along.
So we're going to play with Google's home page.
So I recommend that you open up Google either do this together with me or you do this on your own after
you watch the video.
And we're going to just do some fun things like change the logo.
We'll do a picture of a kitten this time just to be fair to all those cat lovers will change all the
links so that they go to being dot com or something like that.
The one point that I do want to emphasize in this lesson is that we can use a loop to manipulate multiple
elements so we don't always have to select one thing and change its color or select one image and change
its source.
We can select all the images and then loop through that list and for each one change its source.
So I'm going to show you how I would do that here.
So we'll start simple.
Let's start by selecting this logo.
And a quick side note if you are on Google on a day where they have a Google Doodle instead of this
regular logo.
It might not be an image here.
Sometimes they have fancy animations or interactive games.
And in that case they might be something like a canvas element.
So if you do encounter that when you inspect That's all right you can just watch this part.
We've already seen how to change image sources but I just want to show that you can do it on anybody's
website so select it.
It's an image and it has an ID so that makes it easy.
HP logo.
So let's select that let's call it our logo equals document that query selector
HP logo.
And of course we could have used element by ID as well.
So we end up with Logo equal to that.
So we've now selected that.
And if we want to change the image we gonna change the source.
We need to use set attribute and I have just the image here.
Nice kitten.
So I'm going to take this Kidan you are.
I'll copy that and I'm going to update the source of this logo to do that.
Do logo dot set attribute instead of fear.
We're going to just write source.
And the second argument is the new source and I hit enter and I get my nice little cat Roquette appear
.
You might get a message like this.
Depending on the image you use.
So I'll briefly explain what this is.
It's just mentioning that we are on a page loaded with TTP as you can see that appear and the image
that I set the source to B is H TTP.
And to make it short HTP is more secure than HGP.
So it's complaining that it should be all HTP Yes we shouldn't be using something less secure.
That's a really simple version but it still lets us do it.
It's not a huge problem for what we're just trying to do here just playing around with Google.
It is something though that you would want to consider if you doing something like this in your own
application and it would be a problem then.
So back to the content here.
Found to change the width and height of this cat so that it takes up the same amount of space that the
original Google logo did.
I can see actually that the height was 92 originally and with was two hundred and seventy two.
And so that's what's happening here.
You can see if I want to change this I can do something like this logo dot style dot with and takes
a string and just change that to be 500 pixels.
You can see it stretches out and I can do the same thing.
Change it to be a thousand pixels.
Get a nice stretch kitty and we can change the width.
I mean the height and let's make that 500 or poor cat.
It's just getting stretched all over the place.
So let's go ahead and reset the height to something a little bit more appropriate.
Let's go for the height to be about 100 pixels and the width
to be about 200.
All right so that will work for us for now just for some more practice.
Let's also give it a border around that image so logo that style border equals and we will do a two
pixel solid purple border and there is our wonderful partner around that image.
OK so now let's move on to what I introduced at the beginning of the video which is selecting a bunch
of elements at once and using a loop to manipulate them rather than having to do it individually.
So what we're going to do is select all of the anchor tags on the page.
There's a lot of links on this page.
We're going to take each one and change the ref attribute to go to some other web site rather than wherever
they go.
So to start we need to select all the anchor tags so we have a bunch of ways of doing that.
I'm going to call it links are links and we will do document.
We could do a query letter all but I'm going to do get elements by tag name anchor tag and if we look
at links you can see we get quite a few on this page so we're going to loop through this.
We can't just do links dot set attribute that doesn't exist tells us link starts at attribute it's not
a function.
And that's because said attribute only exists on individual elements and links.
Is this collection of nodes.
So I need to loop through it just like I would loop through any other array like object.
So I can't use for each because it's not a real array.
So I need to use a for loop or technically I could use a while loop.
Most people would use a for loop.
So for are equals zero is less than links that length and will add 1
and then inside the loop we're going to access each individual link links Hi.
And let's start by just printing out its text content.
So links that text content and we'll cancel that log that.
So this is a common pattern looping through a bunch of elements and doing something maybe not printing
it out in the console but displaying it somehow or changing something about it changing its color.
So we hit enter and you can see this is the text content of all of the links on the page.
So we get you know things like photos and translate Google plus drive play YouTube all those links are
somewhere on this page which makes sense seeing that it's Google's home page.
So rather than just print things out in a hit the up arrow and go back to this loop and let's actually
start by changing the style so that we can see the lengths easier let's make them a different color
and let's make them have a border around them.
So I'm going to get rid of my console that log and I'm going to do lynx I style and we'll change the
background to start and let's make that a pink.
And if we hit enter you can see I'll close the console.
All the links on the page are now Pink.
I have a background that's pink.
So this thing right here is a link.
All of these naff are items in the sign in button.
It's also a link.
So let's do one more thing.
Let's loop through again.
Hit the up arrow and let's do a few things so let's do style.
Border equals one pixel and let's do dasht purple.
And on the next line links I style and let's change the color to be orange.
So those two hit enter.
And you can see we get these really beautiful links on our page pink background tiny purple border not
just a regular border.
It's dasht very fancy.
And we get some orange text in there as well.
But if we click them you can see that the traps haven't yet changed and that makes sense because we
haven't changed them.
So I want to change them all to go to WDW.
Being dot com needs to go to the con. And I already have my links selected.
This huge collection and I already have that loop written so I'm going to reuse it.
And just to reiterate this is something that will do a lot.
So get comfortable if you can writing these four loops where we can't use a for each.
So we have to use a for loop.
We do this all the time.
And from here on out until we get to Jey query we're going to be writing this type of line a lot.
So we're going to links I.
And we're going to start but just printing out where every light goes so cancel that log.
And we're going to cancel that log get attribute of atra.
Just like that.
And we don't technically need to invent that but just so it's easier for you to see.
And we're missing our constant log closing print to see here and now we get a list of all the links
and it's interesting you can see that some of them.
This one is the link to this thing javascript forward zero or no.
So some of them are just empty they don't have an 8 Tref some of them go to separate web sites or some
of them are relative paths like this here and some of them are absolute like this one right here.
OK.
So let's change them now.
Compton-Rock blog links I got set attribute and we don't need to constantly log it set attribute.
And let's change them to be what we want HGF we want to change HPF to be W.W..
That's do HTP colon slash slash BW dot Bing dot com just like that.
And we hit enter.
It doesn't look like anything changed.
If we type links and we just look at what we have.
Every single one now goes to being dot com and we can also inspect one and we can see in the element
inspector It goes to being dot com.
And the last thing we do to test it is to click one.
So let's quick the sign in button or let's quit Gmail and you can see it opens up being for me.
So to sum up we selected a bunch of things a collection of links and then we loop through that collection
with a for loop and then inside that for loop we can do something to each individual element which will
then be repeated to all of them.
So I changed the background color the border the font color we changed the ref and we only had to write
a few lines and it was applied to I don't know 20 or 30 different lengths on this page.
So that's a pattern that we're going to use a lot in the next few videos.