0
1
00:00:00,440 --> 00:00:07,310
All right. So this module is all about the Document Object Model, or what people tend to call the DOM.
1

2
00:00:07,320 --> 00:00:09,530
So let's learn what this is all about.
2

3
00:00:09,660 --> 00:00:13,450
Now up till this point our web sites have been static.
3

4
00:00:13,590 --> 00:00:20,000
We basically planned what content our web site should have and also the appearance of that content.
4

5
00:00:20,010 --> 00:00:26,730
So we wrote the HTML and the CSS code, then we hit save and refreshed our browser, and there is our
5

6
00:00:26,730 --> 00:00:27,630
web site.
6

7
00:00:27,720 --> 00:00:35,220
Now here's a problem. If we want our web site to be interactive, then we need to be able to change parts
7

8
00:00:35,220 --> 00:00:36,880
of the web site on the fly,
8

9
00:00:36,900 --> 00:00:37,730
right?
9

10
00:00:37,740 --> 00:00:45,120
So that means, when a user clicks on a button, we'll need to respond to that by changing the content or
10

11
00:00:45,180 --> 00:00:51,690
the appearnace of our web site. But once our web site is live on the Internet, we can't sit there and wait for
11

12
00:00:51,690 --> 00:00:58,290
the user to click on things on our web site and then update the HTML and CSS code, and then reload their
12

13
00:00:58,290 --> 00:00:59,130
web page.
13

14
00:00:59,130 --> 00:01:01,230
That's, that's impossible,
14

15
00:01:01,260 --> 00:01:05,180
and also it'll be a nightmare if you have more than two or three users.
15

16
00:01:05,220 --> 00:01:07,250
You would literally be chained to your web site.
16

17
00:01:07,380 --> 00:01:12,640
Now this is the problem that the DOM or the Document Object Model solves.
17

18
00:01:12,720 --> 00:01:19,400
It basically catalogs the web page into individual objects that we can select and manipulate.
18

19
00:01:19,680 --> 00:01:24,410
So on the left here we've got the HTML code of a really basic web site.
19

20
00:01:24,480 --> 00:01:31,110
It's just got a head section, a body section, a title, and a button. And on the right is roughly the structure
20

21
00:01:31,110 --> 00:01:33,920
of our web site that you might see in the browser.
21

22
00:01:34,050 --> 00:01:40,670
Now the task of converting an HTML file into the DOM is done by the browser
22

23
00:01:40,680 --> 00:01:47,550
when you load up the web page. And what it does is that it turns each of these elements and their associated
23

24
00:01:47,550 --> 00:01:55,500
data into a tree structure with a whole bunch of objects that you can select and manipulate.
24

25
00:01:55,590 --> 00:02:00,320
So the tree model on the right is usually how you'll see the DOM represented.
25

26
00:02:00,360 --> 00:02:06,960
You can see that all of the elements in our HTML has been converted into objects, and their relationships
26

27
00:02:06,960 --> 00:02:09,930
to each other mapped out in the tree diagram.
27

28
00:02:09,930 --> 00:02:17,730
So, for example, the head section is a descendant of the HTML object, but the head and the body, they're
28

29
00:02:17,730 --> 00:02:24,480
siblings, they're not descendants of each other. And everything that is contained inside your HTML document
29

30
00:02:24,750 --> 00:02:27,250
is contained in an object called the document.
30

31
00:02:27,330 --> 00:02:33,690
And for some of you guys this might look a bit like the organizational structure of a company with bosses
31

32
00:02:33,780 --> 00:02:35,610
and subordinates all mapped out.
32

33
00:02:35,610 --> 00:02:39,030
Now there's no point just talking about the DOM without using it,
33

34
00:02:39,420 --> 00:02:42,310
so let's see it in action in real life.
34

35
00:02:42,330 --> 00:02:49,470
Now I've added a few more HTML elements to our web page, and so now this is what it looks like, and I've
35

36
00:02:49,470 --> 00:02:54,170
deleted the Javascript and CSS that I was showing you in the last lesson.
36

37
00:02:54,180 --> 00:03:02,220
So now we only have an HTML document that includes an h1, an input in the form of a checkbox, a button
37

38
00:03:02,310 --> 00:03:07,170
that says Click Me, and an unordered list with three list items,
38

39
00:03:07,170 --> 00:03:12,800
the first of which being an anchor tag that points towards google.com.
39

40
00:03:12,840 --> 00:03:18,410
So this again is a really simple web site, but it now has more elements for us to play around with.
40

41
00:03:18,540 --> 00:03:25,770
So I've installed an HTML tree visualizer Chrome plugin, which is free to install, and I'll include
41

42
00:03:25,770 --> 00:03:28,640
a link to it if you want to check it out as well.
42

43
00:03:28,770 --> 00:03:35,040
But basically what it does is it allows us to visualize what the browser does when it turns our HTML
43

44
00:03:35,070 --> 00:03:38,020
code into a DOM tree.
44

45
00:03:38,490 --> 00:03:42,350
Now you can see that at the top we've got our HTML.
45

46
00:03:42,540 --> 00:03:49,710
So this entire tree is contained inside an object called the document and inside that the first thing
46

47
00:03:49,710 --> 00:03:58,250
we have is an HTML object which contains two children, the head and the body, and inside the body
47

48
00:03:58,270 --> 00:04:05,290
there's a further five children, with an h1, an input, a button, a ul, and the script.
48

49
00:04:05,430 --> 00:04:12,630
So now we can actually tap into the Document Object Model, the DOM, using Javascript, and navigate through
49

50
00:04:12,630 --> 00:04:13,740
this tree.
50

51
00:04:14,040 --> 00:04:17,770
So let's just print out and see what the document looks like.
51

52
00:04:17,970 --> 00:04:23,750
So if you just write document into the console and you expand the output you get back, you can see
52

53
00:04:23,760 --> 00:04:28,230
this is the entire HTML file that we've currently got.
53

54
00:04:28,230 --> 00:04:31,260
Now if we want to navigate through this document object,
54

55
00:04:31,260 --> 00:04:36,510
we can go over to the first element child.
55

56
00:04:36,510 --> 00:04:42,920
So if I hit enter now you can see that it's giving me everything that's inside the HTML.
56

57
00:04:43,020 --> 00:04:49,680
Now I can go even further by saying what is the first child of the first child of the document.
57

58
00:04:49,680 --> 00:04:55,500
So you can see that if the document is all of this and the first child is the HTML, then the first element
58

59
00:04:55,500 --> 00:04:57,120
child is over here.
59

60
00:04:57,180 --> 00:04:58,440
It's the head.
60

61
00:04:58,710 --> 00:05:04,010
And if I hit enter you can see that the Chrome Developer Tools confirms what I just said, and we get
61

62
00:05:04,020 --> 00:05:08,790
returned only the head part of our web site.
62

63
00:05:08,920 --> 00:05:14,800
Now if I wanted the body then I can say instead of first element child I can say last element child
63

64
00:05:15,280 --> 00:05:17,780
and now I get everything that's inside the body.
64

65
00:05:18,010 --> 00:05:25,330
And you can see we're kind of starting to dismember and dismantle our web site to grab and select individual
65

66
00:05:25,330 --> 00:05:27,600
parts that we're interested in.
66

67
00:05:27,610 --> 00:05:31,630
So now, what would I have to do in order to select the h1?
67

68
00:05:31,780 --> 00:05:33,830
Well it's just one level deeper.
68

69
00:05:33,880 --> 00:05:37,570
It's the first element child inside the body.
69

70
00:05:37,570 --> 00:05:43,150
So now if I hit enter you can see I've tapped into our h1 which currently says Hello.
70

71
00:05:43,180 --> 00:05:50,080
So once you've successfully selected the object that you're interested in inside the DOM then you can
71

72
00:05:50,170 --> 00:05:51,460
manipulate it.
72

73
00:05:51,580 --> 00:05:55,810
So we know that this line of code gets us to our h1.
73

74
00:05:55,900 --> 00:05:59,860
So I can simply save it inside a variable. So I can say
74

75
00:06:00,050 --> 00:06:03,650
var heading equals this object,
75

76
00:06:03,670 --> 00:06:08,360
and now you can see if I hit heading you can see it's pointing towards our h1.
76

77
00:06:08,500 --> 00:06:20,410
So if I wanted to manipulate that heading, then I can simply say heading.innerHTML =  "Good Bye".
77

78
00:06:21,600 --> 00:06:28,190
Now you can see, if you watch over here, that when I hit enter and execute this line of code, I have used
78

79
00:06:28,190 --> 00:06:38,060
my Javascript to select the h1 element using the DOM, and then I've manipulated it by changing it's
79

80
00:06:38,150 --> 00:06:39,300
inner HTML,
80

81
00:06:39,440 --> 00:06:48,180
so the part between the HTML tags here, to say Good Bye, and it gets updated in my web site.
81

82
00:06:48,350 --> 00:06:53,210
So this is how we can change our web site on the fly using the DOM.
82

83
00:06:53,210 --> 00:06:57,290
Now there's lots and lots of different ways I can manipulate my objects.
83

84
00:06:57,290 --> 00:07:03,440
So for example I can say, instead of heading.innerHTML, I can say heading.style.color
84

85
00:07:03,920 --> 00:07:05,930
= "red",
85

86
00:07:06,230 --> 00:07:10,790
and that changes my text color of the element that I selected to red.
86

87
00:07:10,820 --> 00:07:15,270
I can also select elements and make it do things.
87

88
00:07:15,290 --> 00:07:24,750
So for example, if I wanted to select my input, that's the checkbox, then I can simply say document.
88

89
00:07:24,770 --> 00:07:25,650
querySelector,
89

90
00:07:25,850 --> 00:07:34,200
so this looks inside our entire document for the object that has the selector of "input",
90

91
00:07:34,250 --> 00:07:41,260
and once I have that object selected then I'm going to call a method on it which is to say click, and
91

92
00:07:41,290 --> 00:07:45,030
what click does is that it simulates a mouse click,
92

93
00:07:45,290 --> 00:07:51,710
and because I've selected the input, or my checkbox, when it performs the click function then it will
93

94
00:07:51,710 --> 00:07:53,150
check that checkbox.
94

95
00:07:53,150 --> 00:07:54,920
So I'm keeping my mouse down here.
95

96
00:07:55,100 --> 00:07:56,600
You can see I'm not cheating.
96

97
00:07:56,730 --> 00:08:03,350
And if I hit enter on this line of code you'll see that my checkbox just got clicked, so it performed
97

98
00:08:03,440 --> 00:08:04,730
an action.
98

99
00:08:04,730 --> 00:08:14,810
So you can see that our objects inside the DOM can have properties and methods. Now properties describe
99

100
00:08:14,810 --> 00:08:20,480
something about the object and the methods are the things that the object can do.
100

101
00:08:20,480 --> 00:08:27,350
So, for example, let's say that our object isn't an HTML button, but instead it's a car object. Well, the car object
101

102
00:08:27,380 --> 00:08:29,250
also has properties and methods.
102

103
00:08:29,330 --> 00:08:34,850
The car object might have properties such as the color of the car, the number of seats, the number of
103

104
00:08:34,850 --> 00:08:35,750
doors.
104

105
00:08:35,750 --> 00:08:41,860
So these are things that describe something about the object. But it also might have methods,
105

106
00:08:41,870 --> 00:08:50,210
so the things that it can do, namely brake, drive, park. So we can use Javascript to manipulate our objects, and
106

107
00:08:50,210 --> 00:08:52,910
it's all done using the dot notation.
107

108
00:08:52,910 --> 00:09:00,130
So if our object was called car, then we can say car.color to get the value of the property.
108

109
00:09:00,200 --> 00:09:02,200
So this is called a getter.
109

110
00:09:02,630 --> 00:09:09,560
And in this case if we ran this code it will give us the output of red because the current value of
110

111
00:09:09,560 --> 00:09:13,480
the color property of the car is equal to red.
111

112
00:09:13,490 --> 00:09:19,510
Now with properties we can also set it so we can say car.numberOfDoors,
112

113
00:09:19,640 --> 00:09:21,880
so the number of doors property of car,
113

114
00:09:22,070 --> 00:09:24,860
let's change it to 0.
114

115
00:09:25,280 --> 00:09:27,230
And now our call has no doors.
115

116
00:09:27,740 --> 00:09:33,200
And this is called setting a property. And you can see that the difference between setting a property
116

117
00:09:33,530 --> 00:09:39,620
and getting a property is simply whether if we assign a value to it with an equal sign.
117

118
00:09:39,620 --> 00:09:41,180
Now what about methods?
118

119
00:09:41,660 --> 00:09:49,120
Well, if we call the method drive on the object car, and remember we're still using that dot notation,
119

120
00:09:49,430 --> 00:09:52,940
then our call will do something.
120

121
00:09:52,940 --> 00:09:53,900
It will drive.
121

122
00:09:53,900 --> 00:09:55,520
It will start moving.
122

123
00:09:56,000 --> 00:10:01,490
And this is when we call a method on our object.
123

124
00:10:01,670 --> 00:10:08,090
Now up till now I've been using the words methods and functions more or less interchangeably, but the
124

125
00:10:08,090 --> 00:10:15,160
only difference between a method and a function is that a method is something that an object can do,
125

126
00:10:15,260 --> 00:10:18,040
so it has to be associated with an object.
126

127
00:10:18,230 --> 00:10:24,410
And in this case, drive is a method, because it's associated with the car object.
127

128
00:10:24,410 --> 00:10:31,220
Now if we take a look back at our button object that we managed to select using the DOM, then we're
128

129
00:10:31,220 --> 00:10:38,240
able to tap into some of its properties to get it and set it as well as use some of its methods to get
129

130
00:10:38,240 --> 00:10:39,680
it to do things.
130

131
00:10:39,710 --> 00:10:47,900
So the properties of our button include things like the innerHTML, the text, or the style, or the firstChild.
131

132
00:10:48,050 --> 00:10:54,050
And we've been tapping into those by saying .innerHTML,
132

133
00:10:54,050 --> 00:11:00,140
or .style, .color, but methods, you can see, all have a set of parentheses at the end.
133

134
00:11:00,380 --> 00:11:03,780
And this is how you can tell the difference between a method and a property.
134

135
00:11:03,980 --> 00:11:09,440
Even though we're using the dot notation to tap into the property or the methods, the methods, because
135

136
00:11:09,440 --> 00:11:13,330
they're essentially a function that the object can do,
136

137
00:11:13,460 --> 00:11:19,220
all have a set of parentheses that allow you to potentially give it an input if needed.
137

138
00:11:19,220 --> 00:11:27,510
Now the methods for a button might include things like click, or appendChild, to add another child on, or setAttribute,
138

139
00:11:27,570 --> 00:11:31,690
to change one of its attributes, like changing the href for example.
139

140
00:11:31,710 --> 00:11:35,540
Now we're going to be reviewing these concepts of object, properties and methods,
140

141
00:11:35,580 --> 00:11:38,580
so don't worry if it doesn't make sense immediately.
141

142
00:11:38,730 --> 00:11:44,520
All that you need to know is that we can access these properties and methods through using the dot notation,
142

143
00:11:44,910 --> 00:11:48,940
and by doing that we can manipulate our HTML objects.
143

144
00:11:49,050 --> 00:11:53,910
Now, as a challenge, I want you to look into the resources of this lesson,
144

145
00:11:53,910 --> 00:11:56,880
where you'll find all three files, index.html,
145

146
00:11:56,920 --> 00:12:03,920
index.js, and styles.css, in the current state, and I want you to download it,
146

147
00:12:03,930 --> 00:12:08,030
open it up in Atom, and select the third li,
147

148
00:12:08,370 --> 00:12:16,410
and I want you to change the text from the word Third to your name or anything you want, but you can't
148

149
00:12:16,410 --> 00:12:18,390
touch the HTML file,
149

150
00:12:18,390 --> 00:12:23,170
you have to do it inside the console just as I've demonstrated before.
150

151
00:12:23,220 --> 00:12:26,080
So pause the video now and give it a go.