1
00:00:02,060 --> 00:00:04,350
We learned how we can select elements,

2
00:00:04,350 --> 00:00:05,530
and it can definitely

3
00:00:05,530 --> 00:00:08,340
be tricky to get that right.

4
00:00:08,340 --> 00:00:11,850
That's why it's super important to practice it.

5
00:00:11,850 --> 00:00:13,410
I told you to play around

6
00:00:13,410 --> 00:00:15,090
with that a little bit on your own.

7
00:00:15,090 --> 00:00:17,250
So that you get more familiar,

8
00:00:17,250 --> 00:00:20,100
with the different ways of selecting elements?

9
00:00:20,100 --> 00:00:22,600
Now it's time to practice this together.

10
00:00:22,600 --> 00:00:24,530
It's exercise time,

11
00:00:24,530 --> 00:00:25,940
and attached.

12
00:00:25,940 --> 00:00:29,520
You'll find this exercise JS file,

13
00:00:29,520 --> 00:00:31,510
which contains some tasks,

14
00:00:31,510 --> 00:00:33,773
for you to practice what you learnt.

15
00:00:35,750 --> 00:00:38,090
Now in task number one,

16
00:00:38,090 --> 00:00:39,340
I want you,

17
00:00:39,340 --> 00:00:43,210
to select D H one element,

18
00:00:43,210 --> 00:00:46,160
which we have in our HTML code,

19
00:00:46,160 --> 00:00:48,950
by drilling into the dome.

20
00:00:48,950 --> 00:00:51,350
So not with get element by ID,

21
00:00:51,350 --> 00:00:52,730
or query selector,

22
00:00:52,730 --> 00:00:53,810
but by diving

23
00:00:53,810 --> 00:00:56,465
into the properties off some other objects.

24
00:00:56,465 --> 00:00:59,680
As you saw it in the last lectures,

25
00:00:59,680 --> 00:01:00,670
it's up to you,

26
00:01:00,670 --> 00:01:03,400
which specific way you choose.

27
00:01:03,400 --> 00:01:05,890
There will be more than one way of getting access

28
00:01:05,890 --> 00:01:06,985
to this element.

29
00:01:06,985 --> 00:01:08,930
But once you've got hold of it,

30
00:01:08,930 --> 00:01:10,750
you should save it in a variable

31
00:01:10,750 --> 00:01:12,533
with a name of your choice.

32
00:01:13,640 --> 00:01:15,283
That's task number one.

33
00:01:16,340 --> 00:01:17,930
In task. number two,

34
00:01:17,930 --> 00:01:21,040
I want you to use that variable from one,

35
00:01:21,040 --> 00:01:22,980
and then do something

36
00:01:22,980 --> 00:01:24,630
which we haven't done before,

37
00:01:24,630 --> 00:01:26,410
but what you should be able to do,

38
00:01:26,410 --> 00:01:28,480
nonetheless, get access

39
00:01:28,480 --> 00:01:33,410
to the parent element of that stored H one element,

40
00:01:33,410 --> 00:01:35,770
which is stored in that variable.

41
00:01:35,770 --> 00:01:39,568
And for that you of course might want to console dir,

42
00:01:39,568 --> 00:01:40,920
that variable,

43
00:01:40,920 --> 00:01:42,200
which you created here

44
00:01:42,200 --> 00:01:46,640
so that you see which properties are available on it.

45
00:01:46,640 --> 00:01:49,060
And maybe you'll find some property

46
00:01:49,060 --> 00:01:50,460
that gives you access

47
00:01:50,460 --> 00:01:53,560
to the parent HTML element.

48
00:01:53,560 --> 00:01:55,690
So to the body element,

49
00:01:55,690 --> 00:01:57,340
since that is the parent

50
00:01:57,340 --> 00:01:59,283
of this H one element.

51
00:02:01,480 --> 00:02:03,580
Now they're all as a bonus task,

52
00:02:03,580 --> 00:02:05,980
you can even extend this a bit further,

53
00:02:05,980 --> 00:02:07,360
and also get access to

54
00:02:07,360 --> 00:02:11,310
the sibling element of H one.

55
00:02:11,310 --> 00:02:14,360
So to this paragraph which we have here,

56
00:02:14,360 --> 00:02:16,970
this paragraph is a sibling of H one.

57
00:02:16,970 --> 00:02:19,300
It sits on the same level,

58
00:02:19,300 --> 00:02:22,040
and maybe that's a little bonus.

59
00:02:22,040 --> 00:02:23,240
You even find a way

60
00:02:23,240 --> 00:02:24,693
of getting access to that.

61
00:02:25,740 --> 00:02:29,190
Now you don't need to store the body,

62
00:02:29,190 --> 00:02:32,200
or this sibling element at any variable,

63
00:02:32,200 --> 00:02:34,060
just getting access to it.

64
00:02:34,060 --> 00:02:36,060
Maybe just console logging

65
00:02:36,060 --> 00:02:37,840
or console during it to the

66
00:02:37,840 --> 00:02:38,673
console,

67
00:02:38,673 --> 00:02:40,640
is all you got to do.

68
00:02:40,640 --> 00:02:43,730
It's just about practicing that you do get access

69
00:02:43,730 --> 00:02:45,113
to certain elements.

70
00:02:46,660 --> 00:02:48,460
Now in task number three,

71
00:02:48,460 --> 00:02:50,160
I want you to again,

72
00:02:50,160 --> 00:02:52,900
select this H one element,

73
00:02:52,900 --> 00:02:55,753
but this time with get element by ID.

74
00:02:56,610 --> 00:02:57,520
And for that, of course,

75
00:02:57,520 --> 00:02:59,400
you might need to add an ID

76
00:02:59,400 --> 00:03:01,203
in the HTML code first,

77
00:03:02,450 --> 00:03:04,500
and then store it in a new variable

78
00:03:04,500 --> 00:03:06,780
or in the same variable.

79
00:03:06,780 --> 00:03:07,923
That's up to you,

80
00:03:09,510 --> 00:03:10,910
in task number four,

81
00:03:10,910 --> 00:03:14,250
I want you to select the second paragraph elements.

82
00:03:14,250 --> 00:03:15,903
So this one, the second

83
00:03:15,903 --> 00:03:18,570
of the two paragraph elements,

84
00:03:18,570 --> 00:03:21,373
and you should select it with query selector.

85
00:03:22,240 --> 00:03:23,073
And for that,

86
00:03:23,073 --> 00:03:27,340
you also might need to adjust the HTML code a little bit

87
00:03:27,340 --> 00:03:30,270
for example, also to mix things up.

88
00:03:30,270 --> 00:03:32,760
You might want to consider adding a clause

89
00:03:32,760 --> 00:03:34,240
to this paragraph,

90
00:03:34,240 --> 00:03:37,210
so that you can select it with that clause

91
00:03:38,670 --> 00:03:41,400
and then store that in a new variable.

92
00:03:41,400 --> 00:03:44,370
Again, with a name of your choice.

93
00:03:44,370 --> 00:03:45,660
And as a side note,

94
00:03:45,660 --> 00:03:47,820
when I say name of your choice,

95
00:03:47,820 --> 00:03:50,190
you of course should use names

96
00:03:50,190 --> 00:03:53,360
that follow the conventions you learned about,

97
00:03:53,360 --> 00:03:54,520
up to this point.

98
00:03:54,520 --> 00:03:57,620
And that of course describe what's stored

99
00:03:57,620 --> 00:03:58,930
in the variable

100
00:03:58,930 --> 00:03:59,993
as you learned it.

101
00:04:01,750 --> 00:04:04,490
Now, then I got a last bonus task,

102
00:04:04,490 --> 00:04:06,980
which means if you're not able to do that,

103
00:04:06,980 --> 00:04:08,070
it's no problem.

104
00:04:08,070 --> 00:04:09,690
You will see in the solution,

105
00:04:09,690 --> 00:04:13,720
but maybe you can do that already.

106
00:04:13,720 --> 00:04:15,490
I want you to try

107
00:04:15,490 --> 00:04:18,010
and change the text content of this

108
00:04:18,010 --> 00:04:19,130
paragraph element.

109
00:04:19,130 --> 00:04:20,950
Which you selected in four

110
00:04:20,950 --> 00:04:21,783
and set it

111
00:04:21,783 --> 00:04:24,690
to any other text of your choice.

112
00:04:24,690 --> 00:04:25,610
Again, you might want

113
00:04:25,610 --> 00:04:28,150
to console dir this paragraph element.

114
00:04:28,150 --> 00:04:29,410
Once you saved it,

115
00:04:29,410 --> 00:04:30,490
in a variable

116
00:04:30,490 --> 00:04:33,890
so that you see which properties are available there.

117
00:04:33,890 --> 00:04:36,180
And which properties might allow you

118
00:04:36,180 --> 00:04:37,543
to change something,

119
00:04:39,030 --> 00:04:40,260
that's it for now.

120
00:04:40,260 --> 00:04:41,970
These are my tasks for you.

121
00:04:41,970 --> 00:04:43,950
Definitely try this on your own first,

122
00:04:43,950 --> 00:04:46,320
but then also have a look at my solution,

123
00:04:46,320 --> 00:04:48,120
and compare yours to it.

124
00:04:48,120 --> 00:04:50,783
So that you see how I solved this.