1
00:00:02,080 --> 00:00:05,700
Now to practice this, I'm here in my console,

2
00:00:05,700 --> 00:00:09,330
in the DevTools on the loaded webpage

3
00:00:09,330 --> 00:00:13,130
because now I'm not going to write code here

4
00:00:13,130 --> 00:00:16,690
in app JS but instead, the great thing about

5
00:00:16,690 --> 00:00:20,790
this console is that we can also write code here.

6
00:00:20,790 --> 00:00:22,590
If you click into this field down here,

7
00:00:22,590 --> 00:00:26,010
you can write JavaScript code here as well.

8
00:00:26,010 --> 00:00:28,850
And we can then instantly run this code

9
00:00:28,850 --> 00:00:30,953
by just hitting the enter key.

10
00:00:32,200 --> 00:00:35,730
And that will allow us to play around with JavaScript

11
00:00:35,730 --> 00:00:39,210
in an easier way than if we have to write to code,

12
00:00:39,210 --> 00:00:41,830
save it, and then see the result here

13
00:00:42,890 --> 00:00:47,890
and now let's say we wanna select this H1 element here.

14
00:00:48,760 --> 00:00:51,420
Now, when we wanna drill into the DOM,

15
00:00:51,420 --> 00:00:56,010
we can do this with a document body as we did it before.

16
00:00:56,010 --> 00:00:59,890
And then for example, with children and you see,

17
00:00:59,890 --> 00:01:03,580
we get auto completion here in this console as well,

18
00:01:03,580 --> 00:01:07,810
children and now I even get a preview here.

19
00:01:07,810 --> 00:01:09,160
This is not the final output.

20
00:01:09,160 --> 00:01:12,040
I get a preview here of what's inside children.

21
00:01:12,040 --> 00:01:14,750
We get an array with three elements.

22
00:01:14,750 --> 00:01:17,840
The script was not added by us, as mentioned before.

23
00:01:17,840 --> 00:01:20,649
It's injected by this life server extension,

24
00:01:20,649 --> 00:01:23,820
but we have our H1 and our P element.

25
00:01:23,820 --> 00:01:26,030
And if we wanna select the H1 element,

26
00:01:26,030 --> 00:01:28,350
we can easily see it here in this preview

27
00:01:28,350 --> 00:01:30,663
that we need to select the first child.

28
00:01:31,660 --> 00:01:35,700
And if you, now hit enter, that's being output here.

29
00:01:35,700 --> 00:01:38,690
By default it's output like this,

30
00:01:38,690 --> 00:01:42,870
not in his object form but in this HTML form,

31
00:01:42,870 --> 00:01:46,170
which isn't really JavaScript but a little,

32
00:01:46,170 --> 00:01:49,950
utility functionality by the Chrome DevTools

33
00:01:49,950 --> 00:01:51,743
where it outputs it like this.

34
00:01:52,670 --> 00:01:54,310
If you wanna see it differently,

35
00:01:54,310 --> 00:01:59,170
then you can consult dir and then put your code in here so

36
00:01:59,170 --> 00:02:02,600
that you console dir this result instead of logging it

37
00:02:02,600 --> 00:02:04,893
which would be the default if you hit enter.

38
00:02:05,880 --> 00:02:08,440
If you hit enter here with console dir,

39
00:02:08,440 --> 00:02:10,993
then we get the real object being output here.

40
00:02:12,610 --> 00:02:16,250
So that's one way of selecting this H1 element

41
00:02:16,250 --> 00:02:19,690
and I'm going to clear this console here with this button

42
00:02:19,690 --> 00:02:22,040
and then I'll show you an alternative way

43
00:02:22,040 --> 00:02:24,490
because an alternative way would be

44
00:02:24,490 --> 00:02:28,480
to access the body and then first child,

45
00:02:28,480 --> 00:02:32,270
except for the fact that now we see the first child

46
00:02:32,270 --> 00:02:34,853
is actually some text, as it seems.

47
00:02:35,700 --> 00:02:37,453
Not the H1 element.

48
00:02:38,500 --> 00:02:41,850
If you use document body, first element child

49
00:02:41,850 --> 00:02:44,103
on the other hand, you get this H1 element,

50
00:02:45,480 --> 00:02:48,620
and that's another way of drilling into the DOM.

51
00:02:48,620 --> 00:02:50,530
But why are we getting texts here

52
00:02:50,530 --> 00:02:53,220
if we use first child?

53
00:02:53,220 --> 00:02:56,270
Because for that, it's important to understand

54
00:02:56,270 --> 00:03:01,270
that in our DOM here, we don't just have all

55
00:03:01,490 --> 00:03:05,820
these HTML elements but the text which we

56
00:03:05,820 --> 00:03:10,130
have in our HTML document also is of course saved

57
00:03:10,130 --> 00:03:12,033
and understood by the browser.

58
00:03:13,080 --> 00:03:17,590
Now, when we access children, as we did it before,

59
00:03:17,590 --> 00:03:19,620
this children property.

60
00:03:19,620 --> 00:03:23,460
That will only include child elements,

61
00:03:23,460 --> 00:03:28,460
child HTML elements and their DOM representation.

62
00:03:28,890 --> 00:03:30,910
But as I mentioned, that's not

63
00:03:30,910 --> 00:03:33,930
all the information the browser saves.

64
00:03:33,930 --> 00:03:37,410
It also saves all your texts

65
00:03:37,410 --> 00:03:40,330
that is part of your HTML document.

66
00:03:40,330 --> 00:03:44,810
So all the non HTML element content

67
00:03:44,810 --> 00:03:47,370
and you'll see that if you use child Nodes

68
00:03:47,370 --> 00:03:49,570
instead of children.

69
00:03:49,570 --> 00:03:52,010
A Node is basically either text

70
00:03:52,010 --> 00:03:57,010
or an HTML element and your entire content,

71
00:03:57,410 --> 00:04:02,103
your HTML content is translated to these nodes.

72
00:04:03,090 --> 00:04:06,883
So to these objects with information about your content.

73
00:04:07,940 --> 00:04:11,500
Up to this point, we always had a look at HTML elements

74
00:04:11,500 --> 00:04:12,690
and the their objects.

75
00:04:12,690 --> 00:04:15,840
And these are the most important nodes

76
00:04:15,840 --> 00:04:20,769
but all the text content is also saved as such nodes.

77
00:04:20,769 --> 00:04:25,680
And we can see that with child nodes or with first child,

78
00:04:25,680 --> 00:04:28,960
which actually asks us to first child node,

79
00:04:28,960 --> 00:04:31,510
not the first element child,

80
00:04:31,510 --> 00:04:34,483
that's what views first element child instead for.

81
00:04:35,340 --> 00:04:36,900
And that can be confusing

82
00:04:36,900 --> 00:04:40,810
but it's only important to remember that your HTML content

83
00:04:40,810 --> 00:04:44,330
does not just consist of HTML elements

84
00:04:44,330 --> 00:04:47,820
but of course also as texts and those text pieces

85
00:04:47,820 --> 00:04:50,390
are also stored in the DOM

86
00:04:50,390 --> 00:04:55,300
and with the nodes with child nodes, you get access to both.

87
00:04:55,300 --> 00:04:57,250
With children, you just get access

88
00:04:57,250 --> 00:05:00,400
to the HTML elements that are stored.

89
00:05:00,400 --> 00:05:02,380
And with first child,

90
00:05:02,380 --> 00:05:07,220
you actually access the first child node, so to say.

91
00:05:07,220 --> 00:05:09,483
The name is just a bit confusing here.

92
00:05:10,910 --> 00:05:12,860
Now, it could still be confusing

93
00:05:12,860 --> 00:05:17,860
that first child is actually texts and not the H1 element

94
00:05:18,000 --> 00:05:22,380
because the first child element of body is not texts,

95
00:05:22,380 --> 00:05:27,380
but H1, it would be different if we had "Hi there" here.

96
00:05:28,470 --> 00:05:31,990
Then we could argue that the first child element of body

97
00:05:31,990 --> 00:05:34,720
is text and not an H1 element,

98
00:05:34,720 --> 00:05:36,613
but that's not what we did have.

99
00:05:37,697 --> 00:05:42,320
But keep in mind that we have all this white space here and

100
00:05:42,320 --> 00:05:45,670
this white space is not displayed on the screen,

101
00:05:45,670 --> 00:05:50,000
but it's technically part of our HTML content.

102
00:05:50,000 --> 00:05:54,190
And that is this first child text Node here.

103
00:05:54,190 --> 00:05:59,190
This first child text Node here is actually this empty text.

104
00:05:59,950 --> 00:06:02,790
We can see this here, this data thing here

105
00:06:02,790 --> 00:06:05,740
which looks a bit weird is a lot of white space.

106
00:06:05,740 --> 00:06:10,740
And this backward slash N thing here just means line break.

107
00:06:11,540 --> 00:06:14,470
So it's a line break and then a bunch of white space.

108
00:06:14,470 --> 00:06:17,170
And that's exactly what we have here instead of body.

109
00:06:17,170 --> 00:06:19,870
A line break into this line 11

110
00:06:19,870 --> 00:06:22,350
and then a bunch of white space.

111
00:06:22,350 --> 00:06:25,585
And that's actually our first child node

112
00:06:25,585 --> 00:06:29,690
in this body object in our DOM.

113
00:06:29,690 --> 00:06:31,810
And we have those texts nodes

114
00:06:31,810 --> 00:06:34,483
in addition to the HTML elements.

115
00:06:35,470 --> 00:06:38,580
Now I will say that this is not too important

116
00:06:38,580 --> 00:06:41,240
to keep in mind because most of the time,

117
00:06:41,240 --> 00:06:44,590
you will work with the HTML elements.

118
00:06:44,590 --> 00:06:46,600
So with the kind of content you find

119
00:06:46,600 --> 00:06:48,780
in the children property

120
00:06:48,780 --> 00:06:51,490
but you should have at least heard about text nodes.

121
00:06:51,490 --> 00:06:53,990
And that's why I also wanted to mention them here.