This video we're going to continue learning about different ways of manipulating elements.
Once we select them.
So we've talked about manipulating style changing classes removing classes.
We've talked about altering the text content and enraged him.
Now we're going to talk about manipulating attributes.
So remember attributes are things like H.F. equals Google like com or source on an image.
So they always follow this some property name equals something inside of quotes and attributes are really
important.
And sometimes we want to manipulate them we want to change things.
So we're going to do some simple things early on like changing every link on Google.
Dotcom's homepage to be a link to.
So we're going to do some simple things to start like changing every link on Google dot com homepage
to be Bing dotcom.
But changing attributes is something that is really important and useful in real projects.
So if we made an image slider for instance a lot of times image galleries image sliders are made by
changing the source of an image and it's just one image and the source is being changed.
So that's just one quick example there but we're going to talk about how we can retrieve the value of
specific attributes and how we can also alter or manipulate the value.
In this example we have an anchor tag with a draft to be google.com and an image tag with source is
logo dot DNG.
So we select the anchor tag to start query selector a save that to link and there's a method we can
use called Get attribute and get attribute does what it sounds like it retrieves or it gets the value
of the specific attribute that we ask for.
So if we ask for a breath on this link it's going to give us www.youtube.com and then I can also change
that attribute using Set attribute and set attribute takes two arguments.
The first one is the name of the attribute and the second one is what I want to change it to.
So in this case I'm changing the Tref on this link to be WDW that dogs dot com.
Let's go ahead and demonstrate this in the browser.
So I'm going to use get attribute to retrieve the source of this first image here.
So I need to select it.
Let's just call it image one equals document and let's do get elements by tag name
image and we want the first one.
And if we look at it image 1 if we asked for the source we just do get attribute as sarcy.
And this is our source.
If I wanted to change that image I actually have an image prepared here of another adorable corgi mix
a husky corgi.
I'm going to go ahead and just copy this you r l and change it using image one dot set attribute like
this and then passing it in as the second argument.
And we hit enter and I now get my image updated there.
And I could do the same thing of course to the second image.
I just need to select it so we can do something like this for image to document to get elements by tag
name image 1 and then image to set attribute source to be the same thing.
Now we have two of those adorable mis proportioned Husky's.
So just for variety sake I'll add an anchor tag as well.
So just up top will have an anchor tag with Tref BW dot Google dot com and then we'll go in here.
Link to Google and what we can do to start is change that links a ref.
So if we are fresh the page we have that link we selected so far a equals document that query selector
A.
And then we'll do a dot set attribute a Tref are not doing source anymore we're changing the nature
of attribute and we'll do it to Corgies dot com and if we look first of all if we look at the a tag
you can see the way that it's represented to us and the cons. It's changed to Corgies dot com.
If I inspect it.
HCF has changed the Corgies start com.
And lastly if I click on it in a new tab takes us to Corgies dot com and you'll notice it didn't actually
take us to the Web site Corgies star com tried to do it on a relative path.
So to fix that if we wanted it to actually go to the website Corgies start com which I'm not sure is
a real web site.
We need to do HTP colon slash slash and that tells the browser that this link is not relative to where
we are.
It's an absolute path which means just go to this URL don't try and add it onto the end of where we
are.
So we're using the HTP protocol and I do that now if we inspect.
You can see it's changed HGP.
And if we click on a new tab Corgies dotcom nobody owns that really or somebody owns it but they don't
use it.
It's a shame and shame.
So the last thing just to update this link that doesn't say link to Google.
All we need to do is a.
And we have two choices but text content is usually the better option for just changing the text edit
text content equals link to corgi dot com and now our tag has changed.
It's Atra attribute and the inner content has changed as well.
So to wrap up we have get attribute and set attribute and those work on any attributes.
So I showed it for a Tref and for source but you could use it if you wanted to change an ID to change
a class or any other attribute that's out there.
There are quite a few more but these are the more common ones that will work with