WEBVTT

0
00:00.720 --> 00:07.320
So now that we've seen how you can manipulate the style and the text of an HTML element, the last thing

1
00:07.320 --> 00:12.220
I want to show you how to manipulate are the attributes of any element.

2
00:12.300 --> 00:17.790
So, just a reminder, the attributes are all the things that get colored in orange in Atom,

3
00:17.820 --> 00:24.330
so for example, class is an attribute, or the href for an anchor tag is the attribute, or the src for

4
00:24.330 --> 00:32.020
an image. They’re all attributes. Everything that goes inside the tag, other than the tag name itself, are attributes.

5
00:32.100 --> 00:35.250
So we have a link up here that points towards Google,

6
00:35.260 --> 00:35.520
right?

7
00:35.520 --> 00:37.730
It takes us to the Google search page.

8
00:37.980 --> 00:42.910
Now what if we've gone crazy and we decided to point people towards Bing instead?

9
00:43.260 --> 00:50.790
Well, we can get a list of attributes that are attached to the element by saying document.querySelector

10
00:51.030 --> 00:56.080
(“a”), and that of course gets us our first anchor tag which points towards Google.

11
00:56.140 --> 01:03.030
And now if we say .attributes, then that will give us a list of all the attributes that are currently

12
01:03.030 --> 01:05.760
attached to this HTML element.

13
01:05.790 --> 01:09.620
And as you can see there's only one and that is the href.

14
01:09.660 --> 01:16.220
So we can now retrieve the current value of that attribute by saying .getAttribute,

15
01:16.410 --> 01:19.710
and notice how this is singular and not plural,

16
01:19.740 --> 01:25.380
so we're only getting back the value of a single attribute, and we have to specify the name of the attribute

17
01:25.380 --> 01:26.400
that we want.

18
01:26.400 --> 01:32.370
So in this case it's the href, and you can see that we get back that currently it's pointing towards

19
01:32.490 --> 01:34.160
google.com.

20
01:34.170 --> 01:41.190
So now if we wanted to change this then instead of saying getAttribute, we can say setAttribute, but

21
01:41.190 --> 01:45.220
this method takes two parameters, two inputs essentially.

22
01:45.390 --> 01:48.070
One is which attribute do you want to change,

23
01:48.180 --> 01:53.460
and the second one after the comma is what do you want to change it to,

24
01:54.090 --> 01:58.350
and we're going to say www.bing.com.

25
01:58.350 --> 02:00.910
Wow, I've never typed that in my life before.

26
02:01.200 --> 02:08.040
All right. So now if I click on this link, even though it still says Google, because the innerHTML is Google,

27
02:08.610 --> 02:14.400
if I click on it, you can see it takes me to this wonderful web site that nobody has ever used in their

28
02:14.400 --> 02:16.360
lives before.

29
02:16.360 --> 02:17.140
All right. Cool.

30
02:17.190 --> 02:24.570
So this is a really quick and easy way of getting, setting, and seeing what the attributes are for any

31
02:24.570 --> 02:26.640
element you select in the DOM.