1
00:00:02,150 --> 00:00:05,760
Now, let's comment out this code here

2
00:00:05,760 --> 00:00:07,070
and let's write this again,

3
00:00:07,070 --> 00:00:10,580
but let's now use these query functionalities.

4
00:00:10,580 --> 00:00:12,060
We know that we want to

5
00:00:12,060 --> 00:00:15,290
get access to this anchor element in the end

6
00:00:16,320 --> 00:00:21,127
and one way of doing that would be to give it an id,

7
00:00:21,127 --> 00:00:24,150
"external-link" for example,

8
00:00:24,150 --> 00:00:26,223
the id text of course, is up to you.

9
00:00:27,210 --> 00:00:29,710
And now we've got a function in JavaScript,

10
00:00:29,710 --> 00:00:33,583
which we can use to get access to that element by id.

11
00:00:34,520 --> 00:00:38,120
It's a function, or to be precise, a method

12
00:00:38,120 --> 00:00:41,230
that exists on the document object.

13
00:00:41,230 --> 00:00:43,793
There, we have the getElementById

14
00:00:45,350 --> 00:00:46,670
method

15
00:00:46,670 --> 00:00:47,863
written like this,

16
00:00:48,700 --> 00:00:51,100
and you should make sure you write it correctly.

17
00:00:51,100 --> 00:00:53,923
If you add a typo in there, then it won't work.

18
00:00:54,800 --> 00:00:58,280
Of course, using auto-completion is your safest bet

19
00:00:58,280 --> 00:00:59,763
of avoiding typos.

20
00:01:01,170 --> 00:01:04,000
Now, getElementById is a method,

21
00:01:04,000 --> 00:01:06,030
hence we execute it like this,

22
00:01:06,030 --> 00:01:09,200
and it's a method that wants a parameter

23
00:01:09,200 --> 00:01:12,950
and the parameter should be the id for which you're looking.

24
00:01:12,950 --> 00:01:16,030
So it should be a string, hence we need quotes,

25
00:01:16,030 --> 00:01:21,030
and then in there the id which we added on an element,

26
00:01:21,060 --> 00:01:23,317
in this case, "external-link".

27
00:01:24,280 --> 00:01:27,940
And then this will look for an element with that ID

28
00:01:27,940 --> 00:01:31,770
and if it finds it, it gives us access to that element,

29
00:01:31,770 --> 00:01:34,380
it returns that element.

30
00:01:34,380 --> 00:01:37,450
And we learned about return statements in functions before.

31
00:01:37,450 --> 00:01:41,000
This essentially is a built-in function, a built-in method,

32
00:01:41,000 --> 00:01:45,680
that does return this element we're looking for by its id.

33
00:01:45,680 --> 00:01:49,510
So this function will return this element object,

34
00:01:49,510 --> 00:01:52,810
in our case here, this anchor element object,

35
00:01:52,810 --> 00:01:55,560
and since that's the case, we can add a dot here

36
00:01:55,560 --> 00:01:58,630
because we know that this here returns an object.

37
00:01:58,630 --> 00:02:02,470
So now with that dot here, we dive into that returned object

38
00:02:02,470 --> 00:02:03,883
and do something with it.

39
00:02:04,890 --> 00:02:06,760
Alternatively, we can, of course,

40
00:02:06,760 --> 00:02:10,400
also store this returned object in a variable,

41
00:02:10,400 --> 00:02:12,967
and here I'll quickly store it in a variable,

42
00:02:12,967 --> 00:02:16,223
"anchorElement" could be a fitting name,

43
00:02:17,660 --> 00:02:21,890
and then we can access anchorElement dot something

44
00:02:21,890 --> 00:02:23,520
in a new line.

45
00:02:23,520 --> 00:02:25,290
That's totally up to you.

46
00:02:25,290 --> 00:02:29,530
We can do it in the same line or store it in a variable

47
00:02:29,530 --> 00:02:32,390
and then do it in a new line.

48
00:02:32,390 --> 00:02:35,940
The latter approach has the advantage of avoiding

49
00:02:35,940 --> 00:02:39,440
overly long lines and therefore,

50
00:02:39,440 --> 00:02:44,400
it tends to lead to cleaner, easier to read code.

51
00:02:44,400 --> 00:02:48,660
So I personally prefer splitting this across two lines

52
00:02:48,660 --> 00:02:50,523
and using a variable here.

53
00:02:51,480 --> 00:02:53,790
Of course, we must use a variable

54
00:02:53,790 --> 00:02:57,670
if we ever want to use this anchor element again

55
00:02:57,670 --> 00:02:59,730
anywhere else in our code.

56
00:02:59,730 --> 00:03:02,740
Then we should always store it in a variable.

57
00:03:02,740 --> 00:03:05,690
Otherwise, if we would want to use it again later

58
00:03:05,690 --> 00:03:10,560
in other parts of our code, we would have to re-fetch it.

59
00:03:10,560 --> 00:03:15,380
We would have to rerun this, getElementById command.

60
00:03:15,380 --> 00:03:17,130
So if that's our plan,

61
00:03:17,130 --> 00:03:21,290
storing it in a variable and only running this command once

62
00:03:21,290 --> 00:03:22,993
will be a bit more efficient.

63
00:03:24,140 --> 00:03:26,270
Either way, we are operating

64
00:03:26,270 --> 00:03:28,893
on that element that is returned by getElementById.

65
00:03:30,300 --> 00:03:33,200
And since we know that this is an anchor element,

66
00:03:33,200 --> 00:03:38,110
we can access the href property as we did it up here

67
00:03:39,010 --> 00:03:43,260
and assign our new value as we did it up here.

68
00:03:43,260 --> 00:03:45,793
So just assign a new value.

69
00:03:46,720 --> 00:03:51,220
And that's simply a quicker and more secure way

70
00:03:51,220 --> 00:03:55,710
of getting access to a specific element by its id.

71
00:03:55,710 --> 00:03:59,140
This is how we can search for a certain element in our DOM,

72
00:03:59,140 --> 00:04:01,520
in our HTML code, so to say,

73
00:04:01,520 --> 00:04:03,543
and then do something with it.