1
00:00:02,460 --> 00:00:04,830
So let's start playing around

2
00:00:04,830 --> 00:00:06,340
with that DOM, and let's see

3
00:00:06,340 --> 00:00:10,320
how we can manipulate it from inside JavaScript,

4
00:00:10,320 --> 00:00:13,670
because of course the goal is not to just output

5
00:00:13,670 --> 00:00:16,079
this document in the console.

6
00:00:16,079 --> 00:00:19,520
And let's maybe start with this link.

7
00:00:19,520 --> 00:00:22,520
This link in our HTML code

8
00:00:22,520 --> 00:00:25,240
has no actual address.

9
00:00:25,240 --> 00:00:30,240
It just has this hash placeholder as an address.

10
00:00:30,320 --> 00:00:33,483
And hence if I click this link, it leads nowhere.

11
00:00:34,500 --> 00:00:38,010
Now let's say we want to write some JavaScript code

12
00:00:38,010 --> 00:00:40,820
that changes this address.

13
00:00:40,820 --> 00:00:44,920
And of course, that's still a bit of a redundant example

14
00:00:44,920 --> 00:00:47,968
because we could, of course, just set an address here

15
00:00:47,968 --> 00:00:51,090
in the HTML code.

16
00:00:51,090 --> 00:00:53,230
But we are learning these basics

17
00:00:53,230 --> 00:00:54,560
step by step here

18
00:00:54,560 --> 00:00:56,080
and therefore for the moment,

19
00:00:56,080 --> 00:00:58,820
we'll practice doing this with JavaScript

20
00:00:58,820 --> 00:01:01,670
so that later we can do more useful

21
00:01:01,670 --> 00:01:04,900
and realistic things with JavaScript.

22
00:01:04,900 --> 00:01:09,310
So therefore, to set this link address,

23
00:01:09,310 --> 00:01:12,860
we will need to get access to this link element.

24
00:01:12,860 --> 00:01:15,050
And we saw in the last lecture

25
00:01:15,050 --> 00:01:16,740
that this link element

26
00:01:16,740 --> 00:01:19,340
is actually inside of this paragraph.

27
00:01:19,340 --> 00:01:22,860
So they're in the children property.

28
00:01:22,860 --> 00:01:27,290
We have this list of nested HTML elements.

29
00:01:27,290 --> 00:01:29,350
So this link here in this case,

30
00:01:29,350 --> 00:01:32,550
since that is the only nested HTML element

31
00:01:32,550 --> 00:01:34,200
in the paragraph.

32
00:01:34,200 --> 00:01:37,210
And on this anchor element here,

33
00:01:37,210 --> 00:01:41,110
we then have various properties that describe

34
00:01:41,110 --> 00:01:44,010
this anchor element to the browser.

35
00:01:44,010 --> 00:01:47,970
And for example, in there,

36
00:01:47,970 --> 00:01:52,030
we find this ref property

37
00:01:53,110 --> 00:01:56,090
that actually does hold some value here,

38
00:01:56,090 --> 00:01:58,360
but this value, if I hover over it

39
00:01:58,360 --> 00:02:00,560
so that we can see the entire value,

40
00:02:00,560 --> 00:02:02,900
is just our local development server

41
00:02:02,900 --> 00:02:06,540
and there the index HTML file hash nothing.

42
00:02:06,540 --> 00:02:09,789
So it is basically leading nowhere.

43
00:02:09,789 --> 00:02:13,580
And we could now try to change this

44
00:02:13,580 --> 00:02:17,470
through JavaScript, and see if that maybe

45
00:02:17,470 --> 00:02:20,573
makes that link do more than it did before.

46
00:02:21,540 --> 00:02:24,580
And therefore, we now need to get access

47
00:02:24,580 --> 00:02:28,240
to this ref attribute in this anchor element,

48
00:02:28,240 --> 00:02:31,400
which is in the children property

49
00:02:31,400 --> 00:02:34,200
of the paragraph element,

50
00:02:34,200 --> 00:02:37,323
which in turn is part of this children array

51
00:02:37,323 --> 00:02:40,860
of the body property,

52
00:02:40,860 --> 00:02:44,020
which is part of the document.

53
00:02:44,020 --> 00:02:44,920
Okay.

54
00:02:44,920 --> 00:02:48,210
So that will be some drilling which we have to do.

55
00:02:48,210 --> 00:02:50,290
And this will become easier later

56
00:02:50,290 --> 00:02:53,300
but for the moment, let's really do it the hard way,

57
00:02:53,300 --> 00:02:56,253
and let's drill into this object.

58
00:02:57,110 --> 00:02:59,250
So let's start with the document,

59
00:02:59,250 --> 00:03:02,120
and then there we want to access the body.

60
00:03:02,120 --> 00:03:03,640
Since document is an object,

61
00:03:03,640 --> 00:03:05,480
we can do this with the dot notation

62
00:03:05,480 --> 00:03:07,133
and access body.

63
00:03:08,040 --> 00:03:10,750
Now body is another object as we saw.

64
00:03:10,750 --> 00:03:15,653
And it is an object which now has this children property.

65
00:03:16,820 --> 00:03:19,620
Children then, as we saw here,

66
00:03:19,620 --> 00:03:22,710
is actually in our body here

67
00:03:22,710 --> 00:03:24,823
holding an array,

68
00:03:25,850 --> 00:03:29,113
as we can tell by these number indexes here.

69
00:03:30,690 --> 00:03:32,910
So now we're interested in the paragraph

70
00:03:32,910 --> 00:03:35,010
and we see that this is the second element

71
00:03:35,010 --> 00:03:36,343
with index one.

72
00:03:37,350 --> 00:03:41,160
So to access this, I actually even see the code here

73
00:03:41,160 --> 00:03:42,770
if I hover over this one,

74
00:03:42,770 --> 00:03:46,630
we have to access children square brackets one,

75
00:03:46,630 --> 00:03:49,400
since I want to access this second element here

76
00:03:49,400 --> 00:03:52,223
in this children property of my body.

77
00:03:53,800 --> 00:03:55,990
So that's not a paragraph.

78
00:03:55,990 --> 00:04:00,740
The paragraph, as we saw, now also has a children property,

79
00:04:00,740 --> 00:04:02,530
which holds another array,

80
00:04:02,530 --> 00:04:04,730
an array with exactly one element,

81
00:04:04,730 --> 00:04:07,160
this anchor element, which is the element

82
00:04:07,160 --> 00:04:10,120
I ultimately want to get access to.

83
00:04:10,120 --> 00:04:13,080
So again, here we see the code for drilling into this.

84
00:04:13,080 --> 00:04:17,850
So I can do children zero here,

85
00:04:17,850 --> 00:04:21,529
to access the first element of this element,

86
00:04:21,529 --> 00:04:22,790
which is the paragraph.

87
00:04:22,790 --> 00:04:25,960
So children one on the body is the paragraph.

88
00:04:25,960 --> 00:04:28,910
Children zero on that paragraph then

89
00:04:28,910 --> 00:04:31,180
is the anchor element.

90
00:04:31,180 --> 00:04:34,363
Just what we see here if I hover over this.

91
00:04:35,900 --> 00:04:38,430
And then this anchor element, as we saw,

92
00:04:38,430 --> 00:04:42,030
has this ref, this href property,

93
00:04:42,030 --> 00:04:46,733
which holds the target destination of this link.

94
00:04:49,767 --> 00:04:52,700
So if I now access dot href here,

95
00:04:52,700 --> 00:04:55,430
and here I'm not getting auto-completion anymore for this,

96
00:04:55,430 --> 00:04:58,260
as you can see, it's not suggesting href

97
00:04:58,260 --> 00:05:00,710
because Visual Studio code doesn't know

98
00:05:00,710 --> 00:05:04,310
that the first element in the second element of body

99
00:05:04,310 --> 00:05:06,500
will be an anchor element.

100
00:05:06,500 --> 00:05:09,020
It could be any HTML element,

101
00:05:09,020 --> 00:05:10,990
or maybe not even exist

102
00:05:10,990 --> 00:05:13,883
if this element wouldn't have any children.

103
00:05:14,730 --> 00:05:17,450
That's why we're not getting auto suggestions here,

104
00:05:17,450 --> 00:05:19,670
but we know that this will exist,

105
00:05:19,670 --> 00:05:21,810
and that this will be an anchor element,

106
00:05:21,810 --> 00:05:26,090
and that it therefore will have that href property,

107
00:05:26,090 --> 00:05:30,083
because we had a look at this output here in the console.

108
00:05:32,200 --> 00:05:35,250
So now here, we got hold of this href element,

109
00:05:35,250 --> 00:05:38,460
and now we want to assign a new value

110
00:05:38,460 --> 00:05:39,513
for this link.

111
00:05:40,350 --> 00:05:44,363
And how do we assign values in JavaScript?

112
00:05:45,250 --> 00:05:46,663
With an equal sign.

113
00:05:47,740 --> 00:05:50,120
You could think that we maybe use a colon

114
00:05:50,120 --> 00:05:53,120
because I mentioned that for assigning values

115
00:05:53,120 --> 00:05:55,650
to properties, we do use a colon

116
00:05:55,650 --> 00:05:57,220
instead of an equal sign,

117
00:05:57,220 --> 00:05:58,740
but that's only the case

118
00:05:58,740 --> 00:06:01,260
if we are creating an object

119
00:06:01,260 --> 00:06:03,560
with these curly braces.

120
00:06:03,560 --> 00:06:05,650
So if I create a new object here

121
00:06:05,650 --> 00:06:07,530
with the curly braces

122
00:06:07,530 --> 00:06:09,740
and I then have some property,

123
00:06:09,740 --> 00:06:12,070
then here I use the colon

124
00:06:12,070 --> 00:06:14,870
for assigning some value.

125
00:06:14,870 --> 00:06:16,640
That is the case here.

126
00:06:16,640 --> 00:06:19,150
But if we drill into a property

127
00:06:19,150 --> 00:06:21,440
of an already existing object

128
00:06:21,440 --> 00:06:23,230
with the dot notation,

129
00:06:23,230 --> 00:06:25,510
then we actually assign a value

130
00:06:25,510 --> 00:06:27,910
with an equal sign, just as we do it

131
00:06:27,910 --> 00:06:30,310
on a regular variable.

132
00:06:30,310 --> 00:06:33,640
And here this new value should not be a string

133
00:06:33,640 --> 00:06:36,290
because this link here is a string.

134
00:06:36,290 --> 00:06:37,310
It's some text,

135
00:06:37,310 --> 00:06:39,800
as we can tell by these quotes here as well.

136
00:06:39,800 --> 00:06:43,444
And we could, for example, target google.com.

137
00:06:43,444 --> 00:06:48,143
So https://google.com.

138
00:06:49,260 --> 00:06:51,283
And then add a semi-colon.

139
00:06:52,660 --> 00:06:55,120
And that's now a very lengthy way of doing that.

140
00:06:55,120 --> 00:06:58,466
We will also soon learn about quicker ways of doing that,

141
00:06:58,466 --> 00:07:00,800
but it is important to understand

142
00:07:00,800 --> 00:07:03,590
how the DOM, in general, is structured

143
00:07:03,590 --> 00:07:06,623
and how you can generally interact with it.

144
00:07:07,870 --> 00:07:09,417
So now if I save that

145
00:07:10,380 --> 00:07:13,050
and we then reload this page,

146
00:07:13,050 --> 00:07:14,560
I get an error,

147
00:07:14,560 --> 00:07:17,143
cannot read property children of null.

148
00:07:18,010 --> 00:07:21,450
And that's a weird error here.

149
00:07:21,450 --> 00:07:24,280
I mean, after all, we carefully checked

150
00:07:24,280 --> 00:07:26,850
that these properties exist

151
00:07:26,850 --> 00:07:30,940
and that we are accessing the right children.

152
00:07:30,940 --> 00:07:33,340
So why am I getting this error?

153
00:07:33,340 --> 00:07:36,070
Did we do something wrong here?

154
00:07:36,070 --> 00:07:37,950
Well, no, we didn't.

155
00:07:37,950 --> 00:07:39,320
The reason for this error

156
00:07:39,320 --> 00:07:41,953
is basically impossible to find

157
00:07:41,953 --> 00:07:45,430
unless you know how JavaScript works

158
00:07:45,430 --> 00:07:47,453
and how it's being executed.