1
00:00:02,090 --> 00:00:04,870
So let's now solve this together.

2
00:00:04,870 --> 00:00:06,270
And first of all,

3
00:00:06,270 --> 00:00:08,010
I will go to index.html

4
00:00:08,010 --> 00:00:11,950
and make sure that exercise.js is included there

5
00:00:12,800 --> 00:00:14,950
with that defer attribute

6
00:00:14,950 --> 00:00:16,990
to make sure that it only runs

7
00:00:16,990 --> 00:00:20,410
once the entire HTML content was parsed

8
00:00:20,410 --> 00:00:23,123
and the DOM was created there for it.

9
00:00:24,430 --> 00:00:27,940
And then we can get started solving these tasks.

10
00:00:27,940 --> 00:00:30,940
And I'll, again, solve them right below the instructions.

11
00:00:30,940 --> 00:00:34,550
It's, of course, up to you whether you did this as well.

12
00:00:34,550 --> 00:00:37,030
Now here we should select the <h1> element

13
00:00:37,030 --> 00:00:38,793
by drilling into the DOM.

14
00:00:39,690 --> 00:00:42,820
And for this, I'll create a new variable,

15
00:00:42,820 --> 00:00:45,860
and I'll name it h1Element,

16
00:00:45,860 --> 00:00:47,780
because in this variable,

17
00:00:47,780 --> 00:00:51,980
I will store this selected <h1> element

18
00:00:51,980 --> 00:00:54,313
which I am about to select,

19
00:00:54,313 --> 00:00:58,450
hence this name, because variables should always describe

20
00:00:58,450 --> 00:00:59,903
what you store in them.

21
00:01:00,850 --> 00:01:05,850
And now to get access to this <h1> element in our DOM,

22
00:01:06,130 --> 00:01:08,450
we will need this document object,

23
00:01:08,450 --> 00:01:12,190
because we learned that this is our bridge to the DOM,

24
00:01:12,190 --> 00:01:15,760
so to this parsed HTML code.

25
00:01:15,760 --> 00:01:19,400
Now the <h1> element here is part of the body.

26
00:01:19,400 --> 00:01:20,310
So first of all,

27
00:01:20,310 --> 00:01:22,763
we need to dive into the body here.

28
00:01:24,080 --> 00:01:27,330
And then to get access to this <h1> element,

29
00:01:27,330 --> 00:01:31,620
we could use firstElementChild, as we saw before,

30
00:01:31,620 --> 00:01:33,540
because the <h1> element

31
00:01:33,540 --> 00:01:37,403
is the first HTML element child of body.

32
00:01:39,380 --> 00:01:40,713
So that's one way,

33
00:01:41,650 --> 00:01:43,370
or if I copy that,

34
00:01:43,370 --> 00:01:47,743
an alternative way would be children 0,

35
00:01:48,690 --> 00:01:53,070
so getting access to all the child elements of body.

36
00:01:53,070 --> 00:01:55,520
Children excludes text nodes,

37
00:01:55,520 --> 00:01:58,920
so it's really only HTML elements

38
00:01:58,920 --> 00:02:02,713
and then accessing the first child element like this.

39
00:02:03,840 --> 00:02:07,393
And that's another way of storing it in h1Element.

40
00:02:08,660 --> 00:02:10,840
You only need one of these two approaches.

41
00:02:10,840 --> 00:02:12,370
Here, I'm just showing both

42
00:02:12,370 --> 00:02:15,110
because, well, it is a practice after all,

43
00:02:15,110 --> 00:02:18,590
but that's how you could select this <h1> element

44
00:02:18,590 --> 00:02:20,433
by drilling into the DOM.

45
00:02:21,890 --> 00:02:23,990
And to see that this works,

46
00:02:23,990 --> 00:02:28,030
I'll console.dir my h1Element here,

47
00:02:28,030 --> 00:02:29,763
whoops, element like this,

48
00:02:30,860 --> 00:02:32,750
and then save everything.

49
00:02:32,750 --> 00:02:37,150
And here, indeed, I see my <h1> element being logged

50
00:02:37,150 --> 00:02:40,030
and we can have a look at its properties here.

51
00:02:40,030 --> 00:02:41,263
So that's working.

52
00:02:44,080 --> 00:02:49,020
The next task is that we should use this h1Element variable,

53
00:02:49,020 --> 00:02:54,020
and therefore, this stored <h1> element object

54
00:02:54,180 --> 00:02:56,180
to get access to its parent,

55
00:02:56,180 --> 00:02:57,860
And then in the bonus task,

56
00:02:57,860 --> 00:02:59,943
also to get access to the sibling.

57
00:03:01,090 --> 00:03:04,120
So here, I'll start with the parent.

58
00:03:04,120 --> 00:03:08,057
And for this, I'll just console.dir h1Element.,

59
00:03:10,080 --> 00:03:12,503
and then how could we get access to the parent?

60
00:03:13,670 --> 00:03:18,160
Well, we can have a look at all the properties we have here

61
00:03:18,160 --> 00:03:21,700
with help of the auto suggestion pop-up,

62
00:03:21,700 --> 00:03:25,200
or we have a look at this output here,

63
00:03:25,200 --> 00:03:28,433
which we have because of console.dir h1Element.

64
00:03:29,530 --> 00:03:32,450
And I think it's a bit easier if we start there

65
00:03:32,450 --> 00:03:34,930
in the browser DevTools.

66
00:03:34,930 --> 00:03:38,070
Here, maybe let's scroll to P

67
00:03:38,070 --> 00:03:39,830
and see if we got some property

68
00:03:39,830 --> 00:03:43,200
that helps us with getting access to the parent.

69
00:03:43,200 --> 00:03:47,690
So if I scroll down to the P properties,

70
00:03:47,690 --> 00:03:50,333
indeed, we got the parentElement and the parentNode.

71
00:03:52,090 --> 00:03:54,820
And here for the parent, both is the same.

72
00:03:54,820 --> 00:03:58,133
So here we don't have that textNode case.

73
00:03:59,210 --> 00:04:01,310
So we can use either of the two.

74
00:04:01,310 --> 00:04:05,287
And hence, here I could console.dir h1Element.parentElement

75
00:04:07,442 --> 00:04:09,010
to output the parent element,

76
00:04:09,010 --> 00:04:10,653
which in this case is my body.

77
00:04:11,710 --> 00:04:15,820
Now here, I'm directly outputting the result

78
00:04:15,820 --> 00:04:20,269
of accessing this parentElement property.

79
00:04:20,269 --> 00:04:22,450
Of course, alternatively,

80
00:04:22,450 --> 00:04:25,350
we could also create a new variable,

81
00:04:25,350 --> 00:04:28,660
store the result of accessing parent element

82
00:04:28,660 --> 00:04:30,200
in that variable,

83
00:04:30,200 --> 00:04:33,410
and then console.dir that variable.

84
00:04:33,410 --> 00:04:35,070
It would have the same effect,

85
00:04:35,070 --> 00:04:38,190
but if we never plan on using that value

86
00:04:38,190 --> 00:04:40,250
anywhere else in our code,

87
00:04:40,250 --> 00:04:44,310
using it instantly, without storing it in a variable first,

88
00:04:44,310 --> 00:04:46,290
is definitely also okay,

89
00:04:46,290 --> 00:04:49,020
especially if the overall code line

90
00:04:49,020 --> 00:04:53,550
still stays quite readable and is not getting too long

91
00:04:53,550 --> 00:04:55,323
as it clearly is the case here.

92
00:04:55,323 --> 00:04:57,253
This is absolutely fine to read.

93
00:04:59,030 --> 00:05:01,110
And here for the bonus task,

94
00:05:01,110 --> 00:05:04,150
we want to do the same for a sibling.

95
00:05:04,150 --> 00:05:06,193
So I'll console.dir h1Element,

96
00:05:07,580 --> 00:05:09,030
and then let's see,

97
00:05:09,030 --> 00:05:11,780
let's see which sibling properties we have.

98
00:05:11,780 --> 00:05:14,120
If I scroll to S,

99
00:05:14,120 --> 00:05:17,053
well, there is no sibling here,

100
00:05:18,390 --> 00:05:21,610
but we do have this previousSibling here.

101
00:05:21,610 --> 00:05:23,070
So it doesn't start with S,

102
00:05:23,070 --> 00:05:26,060
but it is clearly the sibling

103
00:05:26,060 --> 00:05:30,530
that comes before the <h1> element,

104
00:05:30,530 --> 00:05:33,270
so between <body> and <h1>.

105
00:05:33,270 --> 00:05:36,210
And you might think that there is nothing in between,

106
00:05:36,210 --> 00:05:39,180
but you did learn about these text nodes,

107
00:05:39,180 --> 00:05:42,170
and indeed, we have such a text node here,

108
00:05:42,170 --> 00:05:45,940
this line break and this empty text here,

109
00:05:45,940 --> 00:05:50,070
which is between the <h1> element and the <body>.

110
00:05:50,070 --> 00:05:53,793
And sibling, indeed, includes text nodes.

111
00:05:54,650 --> 00:05:57,000
We also have previousElementSibling,

112
00:05:57,000 --> 00:06:00,270
which excludes text nodes, and that's null,

113
00:06:00,270 --> 00:06:04,700
which means there is no previous element sibling,

114
00:06:04,700 --> 00:06:06,510
because that's the case here.

115
00:06:06,510 --> 00:06:11,510
There is no other HTML element between <body> and <h1>,

116
00:06:12,620 --> 00:06:14,800
and body itself is not a sibling,

117
00:06:14,800 --> 00:06:16,080
because it's a parent.

118
00:06:16,080 --> 00:06:18,714
It's on a higher level.

119
00:06:18,714 --> 00:06:21,403
<h1> is a child of body after all.

120
00:06:22,710 --> 00:06:24,760
But since we have previousElementSibling,

121
00:06:25,670 --> 00:06:28,610
we might also have a nextElementSibling,

122
00:06:28,610 --> 00:06:31,933
which then would be this paragraph we're looking for.

123
00:06:32,790 --> 00:06:34,677
So let's go to N here

124
00:06:37,990 --> 00:06:40,270
and indeed the nextSibling,

125
00:06:40,270 --> 00:06:44,180
which includes text nodes, is a text node.

126
00:06:44,180 --> 00:06:45,560
It's this text,

127
00:06:45,560 --> 00:06:47,850
so this line break and this white space

128
00:06:47,850 --> 00:06:50,513
between the <h1> tag and the paragraph,

129
00:06:51,590 --> 00:06:54,060
but the next element sibling,

130
00:06:54,060 --> 00:06:56,370
which excludes text nodes,

131
00:06:56,370 --> 00:06:58,913
is this paragraph we're looking for.

132
00:07:00,270 --> 00:07:02,160
And therefore, that would be the solution

133
00:07:02,160 --> 00:07:04,790
to this bonus task here.

134
00:07:04,790 --> 00:07:07,930
We can access h1Element.nextElementSibling,

135
00:07:09,689 --> 00:07:13,477
and that should output this paragraph in the console.

136
00:07:15,180 --> 00:07:19,620
So if we save everything here, we indeed get h1.

137
00:07:19,620 --> 00:07:22,450
That's our first console.dir statement.

138
00:07:22,450 --> 00:07:25,680
And then for this, the middle one console.dir statement,

139
00:07:25,680 --> 00:07:26,660
we get the body.

140
00:07:26,660 --> 00:07:29,133
And for the last one, we get the paragraph.

141
00:07:30,070 --> 00:07:32,250
And that is this second task,

142
00:07:32,250 --> 00:07:34,833
including the bonus task, solved.

143
00:07:36,900 --> 00:07:41,130
Now let's move on to three, task number three.

144
00:07:41,130 --> 00:07:43,740
Here, we should again select the <h1> element,

145
00:07:43,740 --> 00:07:45,913
but now with getElementById.

146
00:07:46,910 --> 00:07:48,030
Now at the moment,

147
00:07:48,030 --> 00:07:51,950
this won't be possible, because this element has no id.

148
00:07:51,950 --> 00:07:54,225
And of course, as the name suggests,

149
00:07:54,225 --> 00:07:57,833
getElementId only works if you do have an id.

150
00:07:58,870 --> 00:08:01,730
So the effort to solve this task,

151
00:08:01,730 --> 00:08:03,780
or to complete this task,

152
00:08:03,780 --> 00:08:08,490
we need to add the id attribute to this HTML element

153
00:08:08,490 --> 00:08:10,820
and then give it any id of our choice

154
00:08:10,820 --> 00:08:14,400
that is not being used on any other element,

155
00:08:14,400 --> 00:08:16,573
because ids have to be unique.

156
00:08:17,720 --> 00:08:22,060
So here that could be first-title, for example,

157
00:08:22,060 --> 00:08:24,563
of course, the id text is up to you.

158
00:08:25,540 --> 00:08:29,440
And with that id set here in exercise.js,

159
00:08:29,440 --> 00:08:33,630
I can now overwrite the values stored in h1Element

160
00:08:33,630 --> 00:08:37,323
with the result of using document.getElementById.

161
00:08:39,450 --> 00:08:42,380
That was the utility method we can execute

162
00:08:42,380 --> 00:08:43,500
to tell the browser

163
00:08:43,500 --> 00:08:45,860
that it should search this element for us

164
00:08:45,860 --> 00:08:48,583
and return this element to us here,

165
00:08:49,820 --> 00:08:52,840
and then here it was first-title.

166
00:08:52,840 --> 00:08:57,240
And hence, if I then console.dir h1Element here

167
00:08:57,240 --> 00:08:59,133
and I save this all,

168
00:09:01,240 --> 00:09:05,300
I, again, get my h1 element being output here.

169
00:09:05,300 --> 00:09:07,983
And that is task number three solved.

170
00:09:09,680 --> 00:09:11,040
In task number four,

171
00:09:11,040 --> 00:09:14,160
we should select the second paragraph here

172
00:09:14,160 --> 00:09:16,310
with help of querySelector.

173
00:09:17,640 --> 00:09:20,240
And I suggest that you maybe use a class

174
00:09:20,240 --> 00:09:22,923
and then the class selector to do so.

175
00:09:23,900 --> 00:09:27,010
And I want to do that, but in order to do it,

176
00:09:27,010 --> 00:09:30,270
we of course have to add a class here,

177
00:09:30,270 --> 00:09:33,240
a CSS class to this paragraph,

178
00:09:33,240 --> 00:09:37,120
which I'm now not adding to apply certain styling

179
00:09:37,120 --> 00:09:41,840
because we have absolutely no styling in this demo project,

180
00:09:41,840 --> 00:09:45,990
but which I instead only add so that I can query by it

181
00:09:45,990 --> 00:09:47,540
in my JavaScript code,

182
00:09:47,540 --> 00:09:51,693
which is also a valid reason for adding CSS classes.

183
00:09:53,050 --> 00:09:58,050
And here, I'll then add a class named highlighted-paragraph,

184
00:10:00,450 --> 00:10:01,943
or whatever you want,

185
00:10:03,900 --> 00:10:08,410
copy that class name and then exercise.js here.

186
00:10:09,970 --> 00:10:12,110
I'll then store it in a variable,

187
00:10:12,110 --> 00:10:14,480
because that's also requested here,

188
00:10:14,480 --> 00:10:17,710
which could be named highlightedParagraph

189
00:10:19,940 --> 00:10:22,750
if we plan to do some highlighting with that later on

190
00:10:22,750 --> 00:10:24,670
or anything like this,

191
00:10:24,670 --> 00:10:27,710
and then use document.querySelector

192
00:10:29,750 --> 00:10:33,630
and pass our CSS selector as a parameter here,

193
00:10:33,630 --> 00:10:34,783
so as a string.

194
00:10:35,640 --> 00:10:39,400
And for selecting by class, the CSS selector,

195
00:10:39,400 --> 00:10:44,400
the appropriate CSS selector is dot and then the class name.

196
00:10:45,070 --> 00:10:49,180
That's what we would do in CSS code as well.

197
00:10:49,180 --> 00:10:51,903
And that's what we need for querySelector here.

198
00:10:53,910 --> 00:10:56,576
And with this, we can also console.dir

199
00:10:56,576 --> 00:10:59,763
this highlightedParagraph now.

200
00:11:02,590 --> 00:11:03,593
Here it is.

201
00:11:05,870 --> 00:11:08,640
Last but not least, in this bonus task,

202
00:11:08,640 --> 00:11:12,630
we should now try changing that text content.

203
00:11:12,630 --> 00:11:14,540
And we will have a closer look

204
00:11:14,540 --> 00:11:18,810
at changing and manipulating the DOM in the next lectures.

205
00:11:18,810 --> 00:11:22,683
Still, maybe you already were able to do that,

206
00:11:23,570 --> 00:11:26,510
because if we have a look at this paragraph

207
00:11:26,510 --> 00:11:27,990
which we're outputting here,

208
00:11:27,990 --> 00:11:30,000
if we look for T,

209
00:11:30,000 --> 00:11:33,290
since our goal is to change the text content,

210
00:11:33,290 --> 00:11:35,083
if we look for T,

211
00:11:36,920 --> 00:11:40,280
then we will see if I scroll all the way down,

212
00:11:40,280 --> 00:11:44,490
that indeed, there is this textContent property.

213
00:11:44,490 --> 00:11:47,560
And this indeed holds the text content,

214
00:11:47,560 --> 00:11:52,560
so the text node content of this paragraph.

215
00:11:52,670 --> 00:11:54,670
And you see there is a line break,

216
00:11:54,670 --> 00:11:56,410
a bunch of white space,

217
00:11:56,410 --> 00:11:59,030
then this a text,

218
00:11:59,030 --> 00:12:01,360
another a line break and white space,

219
00:12:01,360 --> 00:12:03,880
and then the link part.

220
00:12:03,880 --> 00:12:06,920
Without the HTML element for the links

221
00:12:06,920 --> 00:12:08,830
so without the anchor element,

222
00:12:08,830 --> 00:12:12,090
because this really only includes the text content

223
00:12:12,090 --> 00:12:13,733
of this paragraph,

224
00:12:15,400 --> 00:12:17,490
and that is the text content we see here,

225
00:12:17,490 --> 00:12:21,040
including the line breaks and the white space.

226
00:12:21,040 --> 00:12:22,920
It is important to realize

227
00:12:22,920 --> 00:12:26,000
that these line breaks and the white space,

228
00:12:26,000 --> 00:12:28,960
that this is all part of the text content,

229
00:12:28,960 --> 00:12:32,400
but that the browser just doesn't display it.

230
00:12:32,400 --> 00:12:35,240
We don't see the line break or the white space here,

231
00:12:35,240 --> 00:12:38,350
but it is technically part of our HTML code,

232
00:12:38,350 --> 00:12:40,800
and it is part of this text content,

233
00:12:40,800 --> 00:12:43,230
which is saved in the DOM.

234
00:12:43,230 --> 00:12:46,640
And since we have this textContent property,

235
00:12:46,640 --> 00:12:51,550
we could try assigning a new value to textContent,

236
00:12:51,550 --> 00:12:55,460
so overriding the existing textContent with a new one,

237
00:12:55,460 --> 00:12:58,363
and that then might have an effect on this page.

238
00:12:59,360 --> 00:13:02,223
So that's how we could maybe solve this bonus task.

239
00:13:03,190 --> 00:13:07,050
So here we can access the highlightedParagraph

240
00:13:07,050 --> 00:13:09,860
and then access the textContent property,

241
00:13:09,860 --> 00:13:14,400
and then assign a new value with that equal sign,

242
00:13:14,400 --> 00:13:15,760
not with the colon,

243
00:13:15,760 --> 00:13:18,110
because you learned that you only use that

244
00:13:18,110 --> 00:13:23,090
when creating a new object with help of these curly braces.

245
00:13:23,090 --> 00:13:24,550
When not doing that,

246
00:13:24,550 --> 00:13:28,670
you always assign values with the equal sign.

247
00:13:28,670 --> 00:13:31,180
So here that's how we can overwrite the values

248
00:13:31,180 --> 00:13:33,790
stored in this textContent property

249
00:13:33,790 --> 00:13:35,240
of this highlightedParagraph.

250
00:13:37,200 --> 00:13:42,050
And here we could say, 'This was changed by Max!'

251
00:13:43,040 --> 00:13:44,701
or whatever you want.

252
00:13:44,701 --> 00:13:47,700
Save this, and if I go back,

253
00:13:47,700 --> 00:13:50,720
indeed, we see, "This was changed by Max!"

254
00:13:50,720 --> 00:13:54,510
here on the screen, so that works.

255
00:13:54,510 --> 00:13:57,653
And that's even this bonus task solved.

256
00:13:58,630 --> 00:14:01,000
Now, if you struggled with that bonus task,

257
00:14:01,000 --> 00:14:03,120
that's absolutely no problem though,

258
00:14:03,120 --> 00:14:05,640
because we are going to take a closer look

259
00:14:05,640 --> 00:14:09,363
at how we can manipulate the DOM in the next lectures.