1
00:00:02,070 --> 00:00:03,460
At this point,

2
00:00:03,460 --> 00:00:06,840
you should have a rough, first understanding,

3
00:00:06,840 --> 00:00:09,020
of what this DOM thing is,

4
00:00:09,020 --> 00:00:12,650
and we did now dig a bit into our DOM,

5
00:00:12,650 --> 00:00:17,630
into our JavaScript representation of this HTML code,

6
00:00:17,630 --> 00:00:22,040
to change this link here, the address of this link.

7
00:00:22,040 --> 00:00:25,120
Now as explained, this DOM thing,

8
00:00:25,120 --> 00:00:27,810
with which we can interact in JavaScript,

9
00:00:27,810 --> 00:00:32,090
is basically the translation of our HTML code.

10
00:00:32,090 --> 00:00:34,770
And there is one important characteristic

11
00:00:34,770 --> 00:00:36,720
about this HTML code,

12
00:00:36,720 --> 00:00:40,766
which is also true about this DOM representation.

13
00:00:40,766 --> 00:00:45,766
In HTML, as we can see here on the left on this slide,

14
00:00:46,040 --> 00:00:48,790
we typically have nested elements.

15
00:00:48,790 --> 00:00:53,370
We have this nested structure, where the anchor element

16
00:00:53,370 --> 00:00:56,390
is a child element of the paragraph,

17
00:00:56,390 --> 00:00:58,580
because it's inside the paragraph,

18
00:00:58,580 --> 00:01:02,180
and the paragraph is a child element of the body.

19
00:01:02,180 --> 00:01:06,960
And for example, the h1 element is also a child of the body,

20
00:01:06,960 --> 00:01:09,430
but a sibling to the paragraph,

21
00:01:09,430 --> 00:01:11,960
because it's on the same level.

22
00:01:11,960 --> 00:01:15,540
We did explore this, way early in the course,

23
00:01:15,540 --> 00:01:20,540
and it is an important characteristic of HTML, this nesting.

24
00:01:20,840 --> 00:01:23,530
And with the DOM, we have the same.

25
00:01:23,530 --> 00:01:27,140
You can think of the DOM as a tree,

26
00:01:27,140 --> 00:01:31,140
a nested tree of JavaScript objects.

27
00:01:31,140 --> 00:01:34,180
We have the document, which has a body property,

28
00:01:34,180 --> 00:01:36,220
which holds yet another object,

29
00:01:36,220 --> 00:01:39,850
which has the h1 and the p element as children.

30
00:01:39,850 --> 00:01:42,440
And the p element is another object,

31
00:01:42,440 --> 00:01:46,580
which has the anchor element as its only child.

32
00:01:46,580 --> 00:01:49,390
And that's why we have this kind of code here,

33
00:01:49,390 --> 00:01:52,760
where we drill into those nested objects,

34
00:01:52,760 --> 00:01:56,290
digging deeper and deeper into different objects.

35
00:01:56,290 --> 00:01:59,730
And is is what we saw before in the console as well,

36
00:01:59,730 --> 00:02:03,360
when we locked, or dired, the document.

37
00:02:03,360 --> 00:02:06,250
There, we could also dive deeper and deeper

38
00:02:06,250 --> 00:02:09,210
into this object, if you remember that.

39
00:02:09,210 --> 00:02:11,100
Now I am emphasizing this,

40
00:02:11,100 --> 00:02:13,650
because it is an important characteristic,

41
00:02:13,650 --> 00:02:16,010
and it's important to be aware of that,

42
00:02:16,010 --> 00:02:21,010
when it comes to looking for a certain HTML element

43
00:02:21,460 --> 00:02:22,940
in that DOM object,

44
00:02:22,940 --> 00:02:25,800
because you wanna change it or anything like that.

45
00:02:25,800 --> 00:02:28,120
Because it is a very common task,

46
00:02:28,120 --> 00:02:32,696
that you wanna reach out to a certain element in your DOM,

47
00:02:32,696 --> 00:02:34,830
and you wanna change it.

48
00:02:34,830 --> 00:02:36,616
Like we did it here for this link,

49
00:02:36,616 --> 00:02:41,570
where we set a new address, that's one way of changing it.

50
00:02:41,570 --> 00:02:44,190
You could also change the content of an element,

51
00:02:44,190 --> 00:02:47,580
and change the text that's displayed on the screen.

52
00:02:47,580 --> 00:02:51,820
Or even at a brand new HTML element,

53
00:02:51,820 --> 00:02:54,280
or how we also planned to do it in this example,

54
00:02:54,280 --> 00:02:55,883
which I showed you earlier.

55
00:02:55,883 --> 00:02:59,420
There, we will need to find a way of selecting

56
00:02:59,420 --> 00:03:02,830
this input element, to find out what the user entered,

57
00:03:02,830 --> 00:03:07,020
and we will need a way of selecting this element here,

58
00:03:07,020 --> 00:03:10,544
where we output the number of remaining characters,

59
00:03:10,544 --> 00:03:14,953
so that we can update this with every keystroke by the user.

60
00:03:15,810 --> 00:03:19,410
We will need a way of getting access to our input element

61
00:03:19,410 --> 00:03:21,690
and to this span here,

62
00:03:21,690 --> 00:03:25,020
which contains the remaining characters.

63
00:03:25,020 --> 00:03:27,690
Because that will be data which we need to update

64
00:03:27,690 --> 00:03:30,593
on the running website, through JavaScript.

65
00:03:31,610 --> 00:03:34,850
So selecting elements is a very common task,

66
00:03:34,850 --> 00:03:38,340
because you wanna extract data, or update data.

67
00:03:38,340 --> 00:03:43,040
And there are two general approaches which we can look at,

68
00:03:43,040 --> 00:03:48,040
when it comes to accessing HTML elements in the DOM.

69
00:03:48,340 --> 00:03:51,456
Two approaches which we can also combine.

70
00:03:51,456 --> 00:03:54,360
You can either drill into the DOM,

71
00:03:54,360 --> 00:03:58,019
and drill into elements as I like to call it.

72
00:03:58,019 --> 00:04:01,110
Which means you use this dot notation

73
00:04:01,110 --> 00:04:03,370
for digging deeper and deeper.

74
00:04:03,370 --> 00:04:05,517
So what we did here,

75
00:04:05,517 --> 00:04:10,517
we drilled into the different levels of HTML elements here.

76
00:04:11,960 --> 00:04:16,870
Or you use some utility functions that are provided

77
00:04:16,870 --> 00:04:20,571
by the browser to you, to query for specific elements,

78
00:04:20,571 --> 00:04:23,530
with certain commands.

79
00:04:23,530 --> 00:04:26,700
So when you drill, you have code like this,

80
00:04:26,700 --> 00:04:30,340
and first child, which you see here on this slide,

81
00:04:30,340 --> 00:04:33,350
is a property we haven't used before,

82
00:04:33,350 --> 00:04:36,660
but we will see it in action over the next minutes.

83
00:04:36,660 --> 00:04:40,410
And when you do drill into your DOM like this,

84
00:04:40,410 --> 00:04:44,180
then you always have to know the exact structure.

85
00:04:44,180 --> 00:04:46,790
You have to know that you want the first child

86
00:04:46,790 --> 00:04:50,830
of another child, because that will then be your link.

87
00:04:50,830 --> 00:04:53,040
So here in this example, we basically know

88
00:04:53,040 --> 00:04:56,980
that this code here will select the anchor element

89
00:04:56,980 --> 00:05:00,790
in the paragraph because we had a look at the console output

90
00:05:00,790 --> 00:05:05,330
and clicked our way through to that anchor element there.

91
00:05:05,330 --> 00:05:07,256
And of course we can also infer

92
00:05:07,256 --> 00:05:09,360
how we need to drill into this,

93
00:05:09,360 --> 00:05:12,100
if we have our look at our HTML code.

94
00:05:12,100 --> 00:05:13,490
We know that for body,

95
00:05:13,490 --> 00:05:16,340
the paragraph is the second element in there.

96
00:05:16,340 --> 00:05:17,800
The first one is h1.

97
00:05:17,800 --> 00:05:21,660
And that anchor is then the first element in paragraph,

98
00:05:21,660 --> 00:05:24,300
the text here doesn't count.

99
00:05:24,300 --> 00:05:26,694
But you have to know does kind of structure,

100
00:05:26,694 --> 00:05:30,170
in order to effectively drill into your DOM

101
00:05:30,170 --> 00:05:31,900
and find a certain element,

102
00:05:31,900 --> 00:05:34,263
so that you can then interact with it.

103
00:05:35,480 --> 00:05:39,010
The alternative approach, which often is easier,

104
00:05:39,010 --> 00:05:42,520
is that you instead don't remember this exact structure,

105
00:05:42,520 --> 00:05:45,050
but you use the utility methods,

106
00:05:45,050 --> 00:05:47,980
JavaScript and the browser gives you,

107
00:05:47,980 --> 00:05:51,180
to search for a certain elements.

108
00:05:51,180 --> 00:05:56,180
For example, by ID or by any CSS selector.

109
00:05:56,310 --> 00:05:58,840
So by tag, by class, by ID,

110
00:05:58,840 --> 00:06:02,220
as you learned it for SS in this course.

111
00:06:02,220 --> 00:06:06,230
And we're going to see these utility query methods here,

112
00:06:06,230 --> 00:06:08,593
in action over the next minutes as well.

113
00:06:09,580 --> 00:06:11,910
The advantage here is that you don't need to know

114
00:06:11,910 --> 00:06:15,530
the exact structure of your DOM and your HTML code,

115
00:06:15,530 --> 00:06:18,060
it's enough to know that there is some element

116
00:06:18,060 --> 00:06:21,488
with a certain ID, or with a certain class,

117
00:06:21,488 --> 00:06:25,150
and you can then tell the browser to give you access

118
00:06:25,150 --> 00:06:28,290
to that specific element in JavaScript,

119
00:06:28,290 --> 00:06:32,440
without describing the entire path to that element

120
00:06:32,440 --> 00:06:36,200
as you would need to know it if you drill into the DOM,

121
00:06:36,200 --> 00:06:38,053
to select a specific element.

122
00:06:39,170 --> 00:06:42,310
And these are basically your two main ways

123
00:06:42,310 --> 00:06:44,700
of traversing this DOM tree,

124
00:06:44,700 --> 00:06:47,163
and of selecting specific elements.

125
00:06:48,240 --> 00:06:52,210
And because it's so important to understand this,

126
00:06:52,210 --> 00:06:53,873
we're now going to practice that.