WEBVTT

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

1
00:07.320 --> 00:09.530
So let's learn what this is all about.

2
00:09.660 --> 00:13.450
Now up till this point our web sites have been static.

3
00:13.590 --> 00:20.000
We basically planned what content our web site should have and also the appearance of that content.

4
00:20.010 --> 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
00:26.730 --> 00:27.630
web site.

6
00:27.720 --> 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
00:35.220 --> 00:36.880
of the web site on the fly,

8
00:36.900 --> 00:37.730
right?

9
00:37.740 --> 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
00:45.180 --> 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
00:51.690 --> 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
00:58.290 --> 00:59.130
web page.

13
00:59.130 --> 01:01.230
That's, that's impossible,

14
01:01.260 --> 01:05.180
and also it'll be a nightmare if you have more than two or three users.

15
01:05.220 --> 01:07.250
You would literally be chained to your web site.

16
01:07.380 --> 01:12.640
Now this is the problem that the DOM or the Document Object Model solves.

17
01:12.720 --> 01:19.400
It basically catalogs the web page into individual objects that we can select and manipulate.

18
01:19.680 --> 01:24.410
So on the left here we've got the HTML code of a really basic web site.

19
01:24.480 --> 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
01:31.110 --> 01:33.920
of our web site that you might see in the browser.

21
01:34.050 --> 01:40.670
Now the task of converting an HTML file into the DOM is done by the browser

22
01:40.680 --> 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
01:47.550 --> 01:55.500
data into a tree structure with a whole bunch of objects that you can select and manipulate.

24
01:55.590 --> 02:00.320
So the tree model on the right is usually how you'll see the DOM represented.

25
02:00.360 --> 02:06.960
You can see that all of the elements in our HTML has been converted into objects, and their relationships

26
02:06.960 --> 02:09.930
to each other mapped out in the tree diagram.

27
02:09.930 --> 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
02:17.730 --> 02:24.480
siblings, they're not descendants of each other. And everything that is contained inside your HTML document

29
02:24.750 --> 02:27.250
is contained in an object called the document.

30
02:27.330 --> 02:33.690
And for some of you guys this might look a bit like the organizational structure of a company with bosses

31
02:33.780 --> 02:35.610
and subordinates all mapped out.

32
02:35.610 --> 02:39.030
Now there's no point just talking about the DOM without using it,

33
02:39.420 --> 02:42.310
so let's see it in action in real life.

34
02:42.330 --> 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
02:49.470 --> 02:54.170
deleted the Javascript and CSS that I was showing you in the last lesson.

36
02:54.180 --> 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
03:02.310 --> 03:07.170
that says Click Me, and an unordered list with three list items,

38
03:07.170 --> 03:12.800
the first of which being an anchor tag that points towards google.com.

39
03:12.840 --> 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
03:18.540 --> 03:25.770
So I've installed an HTML tree visualizer Chrome plugin, which is free to install, and I'll include

41
03:25.770 --> 03:28.640
a link to it if you want to check it out as well.

42
03:28.770 --> 03:35.040
But basically what it does is it allows us to visualize what the browser does when it turns our HTML

43
03:35.070 --> 03:38.020
code into a DOM tree.

44
03:38.490 --> 03:42.350
Now you can see that at the top we've got our HTML.

45
03:42.540 --> 03:49.710
So this entire tree is contained inside an object called the document and inside that the first thing

46
03:49.710 --> 03:58.250
we have is an HTML object which contains two children, the head and the body, and inside the body

47
03:58.270 --> 04:05.290
there's a further five children, with an h1, an input, a button, a ul, and the script.

48
04:05.430 --> 04:12.630
So now we can actually tap into the Document Object Model, the DOM, using Javascript, and navigate through

49
04:12.630 --> 04:13.740
this tree.

50
04:14.040 --> 04:17.770
So let's just print out and see what the document looks like.

51
04:17.970 --> 04:23.750
So if you just write document into the console and you expand the output you get back, you can see

52
04:23.760 --> 04:28.230
this is the entire HTML file that we've currently got.

53
04:28.230 --> 04:31.260
Now if we want to navigate through this document object,

54
04:31.260 --> 04:36.510
we can go over to the first element child.

55
04:36.510 --> 04:42.920
So if I hit enter now you can see that it's giving me everything that's inside the HTML.

56
04:43.020 --> 04:49.680
Now I can go even further by saying what is the first child of the first child of the document.

57
04:49.680 --> 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
04:55.500 --> 04:57.120
child is over here.

59
04:57.180 --> 04:58.440
It's the head.

60
04:58.710 --> 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
05:04.020 --> 05:08.790
returned only the head part of our web site.

62
05:08.920 --> 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
05:15.280 --> 05:17.780
and now I get everything that's inside the body.

64
05:18.010 --> 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
05:25.330 --> 05:27.600
parts that we're interested in.

66
05:27.610 --> 05:31.630
So now, what would I have to do in order to select the h1?

67
05:31.780 --> 05:33.830
Well it's just one level deeper.

68
05:33.880 --> 05:37.570
It's the first element child inside the body.

69
05:37.570 --> 05:43.150
So now if I hit enter you can see I've tapped into our h1 which currently says Hello.

70
05:43.180 --> 05:50.080
So once you've successfully selected the object that you're interested in inside the DOM then you can

71
05:50.170 --> 05:51.460
manipulate it.

72
05:51.580 --> 05:55.810
So we know that this line of code gets us to our h1.

73
05:55.900 --> 05:59.860
So I can simply save it inside a variable. So I can say

74
06:00.050 --> 06:03.650
var heading equals this object,

75
06:03.670 --> 06:08.360
and now you can see if I hit heading you can see it's pointing towards our h1.

76
06:08.500 --> 06:20.410
So if I wanted to manipulate that heading, then I can simply say heading.innerHTML =  "Good Bye".

77
06:21.600 --> 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
06:28.190 --> 06:38.060
my Javascript to select the h1 element using the DOM, and then I've manipulated it by changing it's

79
06:38.150 --> 06:39.300
inner HTML,

80
06:39.440 --> 06:48.180
so the part between the HTML tags here, to say Good Bye, and it gets updated in my web site.

81
06:48.350 --> 06:53.210
So this is how we can change our web site on the fly using the DOM.

82
06:53.210 --> 06:57.290
Now there's lots and lots of different ways I can manipulate my objects.

83
06:57.290 --> 07:03.440
So for example I can say, instead of heading.innerHTML, I can say heading.style.color

84
07:03.920 --> 07:05.930
= "red",

85
07:06.230 --> 07:10.790
and that changes my text color of the element that I selected to red.

86
07:10.820 --> 07:15.270
I can also select elements and make it do things.

87
07:15.290 --> 07:24.750
So for example, if I wanted to select my input, that's the checkbox, then I can simply say document.

88
07:24.770 --> 07:25.650
querySelector,

89
07:25.850 --> 07:34.200
so this looks inside our entire document for the object that has the selector of "input",

90
07:34.250 --> 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
07:41.290 --> 07:45.030
what click does is that it simulates a mouse click,

92
07:45.290 --> 07:51.710
and because I've selected the input, or my checkbox, when it performs the click function then it will

93
07:51.710 --> 07:53.150
check that checkbox.

94
07:53.150 --> 07:54.920
So I'm keeping my mouse down here.

95
07:55.100 --> 07:56.600
You can see I'm not cheating.

96
07:56.730 --> 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
08:03.440 --> 08:04.730
an action.

98
08:04.730 --> 08:14.810
So you can see that our objects inside the DOM can have properties and methods. Now properties describe

99
08:14.810 --> 08:20.480
something about the object and the methods are the things that the object can do.

100
08:20.480 --> 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
08:27.380 --> 08:29.250
also has properties and methods.

102
08:29.330 --> 08:34.850
The car object might have properties such as the color of the car, the number of seats, the number of

103
08:34.850 --> 08:35.750
doors.

104
08:35.750 --> 08:41.860
So these are things that describe something about the object. But it also might have methods,

105
08:41.870 --> 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
08:50.210 --> 08:52.910
it's all done using the dot notation.

107
08:52.910 --> 09:00.130
So if our object was called car, then we can say car.color to get the value of the property.

108
09:00.200 --> 09:02.200
So this is called a getter.

109
09:02.630 --> 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
09:09.560 --> 09:13.480
the color property of the car is equal to red.

111
09:13.490 --> 09:19.510
Now with properties we can also set it so we can say car.numberOfDoors,

112
09:19.640 --> 09:21.880
so the number of doors property of car,

113
09:22.070 --> 09:24.860
let's change it to 0.

114
09:25.280 --> 09:27.230
And now our call has no doors.

115
09:27.740 --> 09:33.200
And this is called setting a property. And you can see that the difference between setting a property

116
09:33.530 --> 09:39.620
and getting a property is simply whether if we assign a value to it with an equal sign.

117
09:39.620 --> 09:41.180
Now what about methods?

118
09:41.660 --> 09:49.120
Well, if we call the method drive on the object car, and remember we're still using that dot notation,

119
09:49.430 --> 09:52.940
then our call will do something.

120
09:52.940 --> 09:53.900
It will drive.

121
09:53.900 --> 09:55.520
It will start moving.

122
09:56.000 --> 10:01.490
And this is when we call a method on our object.

123
10:01.670 --> 10:08.090
Now up till now I've been using the words methods and functions more or less interchangeably, but the

124
10:08.090 --> 10:15.160
only difference between a method and a function is that a method is something that an object can do,

125
10:15.260 --> 10:18.040
so it has to be associated with an object.

126
10:18.230 --> 10:24.410
And in this case, drive is a method, because it's associated with the car object.

127
10:24.410 --> 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
10:31.220 --> 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
10:38.240 --> 10:39.680
it to do things.

130
10:39.710 --> 10:47.900
So the properties of our button include things like the innerHTML, the text, or the style, or the firstChild.

131
10:48.050 --> 10:54.050
And we've been tapping into those by saying .innerHTML,

132
10:54.050 --> 11:00.140
or .style, .color, but methods, you can see, all have a set of parentheses at the end.

133
11:00.380 --> 11:03.780
And this is how you can tell the difference between a method and a property.

134
11:03.980 --> 11:09.440
Even though we're using the dot notation to tap into the property or the methods, the methods, because

135
11:09.440 --> 11:13.330
they're essentially a function that the object can do,

136
11:13.460 --> 11:19.220
all have a set of parentheses that allow you to potentially give it an input if needed.

137
11:19.220 --> 11:27.510
Now the methods for a button might include things like click, or appendChild, to add another child on, or setAttribute,

138
11:27.570 --> 11:31.690
to change one of its attributes, like changing the href for example.

139
11:31.710 --> 11:35.540
Now we're going to be reviewing these concepts of object, properties and methods,

140
11:35.580 --> 11:38.580
so don't worry if it doesn't make sense immediately.

141
11:38.730 --> 11:44.520
All that you need to know is that we can access these properties and methods through using the dot notation,

142
11:44.910 --> 11:48.940
and by doing that we can manipulate our HTML objects.

143
11:49.050 --> 11:53.910
Now, as a challenge, I want you to look into the resources of this lesson,

144
11:53.910 --> 11:56.880
where you'll find all three files, index.html,

145
11:56.920 --> 12:03.920
index.js, and styles.css, in the current state, and I want you to download it,

146
12:03.930 --> 12:08.030
open it up in Atom, and select the third li,

147
12:08.370 --> 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
12:16.410 --> 12:18.390
touch the HTML file,

149
12:18.390 --> 12:23.170
you have to do it inside the console just as I've demonstrated before.

150
12:23.220 --> 12:26.080
So pause the video now and give it a go.