1
00:00:02,230 --> 00:00:07,380
So let's have a closer look at that DOM thing, at that Document Object Model.

2
00:00:07,450 --> 00:00:09,670
Consider this HTML code,

3
00:00:09,670 --> 00:00:16,960
this would be some valid HTML code which in the end renders a very simple web page, only the doctype

4
00:00:16,960 --> 00:00:21,460
thing at the very top is missing here because it doesn't really matter to the browser and to Javascript

5
00:00:21,940 --> 00:00:28,570
but this contains a head with a title, it contains a body with a header, with a h1 tag and then a main

6
00:00:28,570 --> 00:00:30,130
tag with a paragraph tag,

7
00:00:30,160 --> 00:00:32,710
So a couple of default HTML tags

8
00:00:32,710 --> 00:00:38,500
which you can use in your HTML documents which are understood by the browser and which will be rendered

9
00:00:38,500 --> 00:00:39,780
to the screen.

10
00:00:39,790 --> 00:00:47,230
Now what the browser does in that case is it of course renders all the pixels but it also kind of parses

11
00:00:47,230 --> 00:00:54,580
the HTML code and creates an object representation of that because behind the scenes, the browser doesn't

12
00:00:54,580 --> 00:00:58,330
work with text which HTML is in the end

13
00:00:58,330 --> 00:01:04,630
but with these objects that are stored in memory and there for example, the HTML tag is translated

14
00:01:04,630 --> 00:01:11,770
to an HTML node as it's called and this is an element node to be precise because that in the end is

15
00:01:11,770 --> 00:01:19,150
a node and these objects are simply called nodes which represents an HTML element, an HTML tag and

16
00:01:19,150 --> 00:01:25,180
therefore it's called an element node and such element nodes are created for all the HTML elements you

17
00:01:25,180 --> 00:01:27,570
see on the left. Now on the right side,

18
00:01:27,640 --> 00:01:32,680
the main and paragraph node is missing because the slide isn't big enough for that but you get the idea.

19
00:01:32,770 --> 00:01:35,920
Now you also already see I'm creating kind of a structure here,

20
00:01:36,040 --> 00:01:40,180
these blocks on the right are indented on different levels

21
00:01:40,330 --> 00:01:45,790
and the reason for that is that in the end the browser creates a tree of elements or a tree of nodes

22
00:01:45,790 --> 00:01:51,050
I should say here and in that tree of nodes, the HTML node is the topmost node,

23
00:01:51,220 --> 00:01:57,610
it has the head and the body as child nodes, the head node has the title as a child node and the body has the

24
00:01:57,610 --> 00:02:03,670
header node as a child node which in turn has the h1 node as a child node. So in the end, the relation

25
00:02:03,730 --> 00:02:08,950
you see in your HTML code on the left is reflected in the created objects as well,

26
00:02:08,980 --> 00:02:15,070
so the browser keeps track off the parent child relations you have between different HTML elements and

27
00:02:15,070 --> 00:02:19,600
it does keep track by creating such a node tree in the end.

28
00:02:19,750 --> 00:02:28,240
Now important to understand is however that not just HTML tags are loaded and created as objects

29
00:02:28,480 --> 00:02:30,690
but also all text that you have

30
00:02:30,970 --> 00:02:37,180
and these are created as so-called text nodes and that might already be strange, what I'm pointing at

31
00:02:37,180 --> 00:02:37,730
here,

32
00:02:37,840 --> 00:02:43,320
this empty whitespace here in front of head is actually translated to a node in the browser,

33
00:02:43,330 --> 00:02:46,960
this is part of the loaded node tree.

34
00:02:46,960 --> 00:02:53,050
So this here in the end is a line break which I try to reflect here with this pipe symbol on the right

35
00:02:53,200 --> 00:02:58,710
and then we have two whitespaces here with the two underscores on the right side in that text node.

36
00:02:58,810 --> 00:03:05,760
Now typically, you don't see that on the screen because due to the way styling works and so on, most whitespace

37
00:03:05,770 --> 00:03:10,900
is actually not rendered but it is part of that DOM tree, of that node

38
00:03:10,900 --> 00:03:11,460
tree in the end

39
00:03:11,470 --> 00:03:11,770
here,

40
00:03:11,770 --> 00:03:16,390
so it's part of the DOM but of course, also the normal text is part of the DOM

41
00:03:16,420 --> 00:03:22,390
as text nodes though and these really are two different types of nodes. You have element nodes for all

42
00:03:22,390 --> 00:03:28,060
the elements which you have but then the content in the elements might be other elements but might also

43
00:03:28,060 --> 00:03:34,810
be text and text is indeed stored as objects but as a different kind of object, as text nodes with different

44
00:03:34,810 --> 00:03:37,270
properties and different methods.

45
00:03:37,270 --> 00:03:44,490
So this is how our HTML code would be reflected by the browser and to get a better feeling for that,

46
00:03:44,680 --> 00:03:50,290
I suggest let's have a closer look at this in our web page. For this, back in the index.html file

47
00:03:50,290 --> 00:03:51,880
with which we started,

48
00:03:51,880 --> 00:03:58,690
I'll add a header here in the body and then a h1 element in there where I say dive into the

49
00:03:58,690 --> 00:04:06,020
DOM or anything like that and this very simple HTML code is therefore already a valid HTML file

50
00:04:06,020 --> 00:04:08,660
which of course is loaded and rendered by the browser,

51
00:04:08,660 --> 00:04:13,880
so if we reload this page, we now see the h1 tag here, of course with no real styling other than

52
00:04:13,880 --> 00:04:19,310
the default styles the browser assigns but still this is some rendered HTML content and now to get a

53
00:04:19,310 --> 00:04:24,890
feeling for what the browser render there, you can always go to the elements tab here in the browser dev

54
00:04:24,890 --> 00:04:29,600
tools in chrome and you'll see in the end the loaded HTML code

55
00:04:29,600 --> 00:04:36,080
but this is basically also what the browser loaded as a DOM but of course reflected still in human

56
00:04:36,080 --> 00:04:39,820
readable HTML tags and not in some object names.

57
00:04:39,890 --> 00:04:44,960
Still, this is in the end what the browser loaded here and this is what you can interact with and in the

58
00:04:44,990 --> 00:04:49,580
dev tools here in chrome you can even hover over things and they are selected on the left so that

59
00:04:49,580 --> 00:04:55,340
you can see where they're at or you use the selection tool here at the top and click on an element and then

60
00:04:55,340 --> 00:05:00,730
the respective DOM node on the right is selected which is also pretty sweet.

61
00:05:00,870 --> 00:05:05,290
Now we might also see that part here on the right, that == $0,

62
00:05:05,330 --> 00:05:08,440
that's a little convenience feature which the browser gives you,

63
00:05:08,570 --> 00:05:12,820
if you now hit escape, the console should open up at the bottom,

64
00:05:13,040 --> 00:05:19,450
of course you can also go to the console tab as an alternative in there if you type $0, you

65
00:05:19,460 --> 00:05:25,170
get access to that h1 element and that's now just a feature here in the browser, not a default Javascript

66
00:05:25,190 --> 00:05:30,440
feature, just a feature here in the chrome dev tools to make it easy for you to select elements.

67
00:05:30,650 --> 00:05:39,880
And if you for example type console.dir $0, you print that h1 element or you get

68
00:05:39,880 --> 00:05:47,180
access to the h1 element object here and you can dive into it and you'll see a bunch of things,

69
00:05:47,200 --> 00:05:56,120
for example if you scroll down to t, you'll see that text content element here which in the end holds

70
00:05:56,120 --> 00:05:57,680
the text in there

71
00:05:57,680 --> 00:06:02,380
and that is an example for that text node which is rendered in there.

72
00:06:02,390 --> 00:06:08,120
Now speaking of text nodes, what you don't see in the chrome dev tools and you can dismiss this console

73
00:06:08,120 --> 00:06:09,680
by hitting escape again,

74
00:06:09,770 --> 00:06:16,670
what you don't see here is in the end the text nodes. You of course see the text where you have real

75
00:06:16,670 --> 00:06:21,100
text in there but whitespace is not displayed as a separate node here,

76
00:06:21,110 --> 00:06:24,040
so that's not something which is shown here,

77
00:06:24,050 --> 00:06:29,270
still it's important for you to understand that such text nodes are created and we'll see them later

78
00:06:29,390 --> 00:06:34,520
when we do actually programmatically query elements from inside our Javascript code.

79
00:06:34,550 --> 00:06:40,340
So this is a DOM node and here by the way in the dev tools, you can even edit this on the fly which will

80
00:06:40,340 --> 00:06:46,130
not affect your file here but which you can do to try out different things and change things here,

81
00:06:46,190 --> 00:06:51,230
you can even change the type of a HTML tag and so on, so that's all possible but that's not really

82
00:06:51,230 --> 00:06:52,970
the focus of what I want to do here,

83
00:06:53,390 --> 00:06:59,300
instead let's now see how we can actually query these things from inside Javascript to work with the

84
00:06:59,300 --> 00:07:04,670
DOM here and with these nodes from inside Javascript and then maybe also change some things from inside

85
00:07:04,670 --> 00:07:04,970
there.