Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
2
00:00:07,320 --> 00:00:09,530
So let's learn what this is all about.
3
00:00:09,660 --> 00:00:13,450
Now up till this point our web sites have been static.
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.
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
6
00:00:26,730 --> 00:00:27,630
web site.
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
8
00:00:35,220 --> 00:00:36,880
of the web site on the fly,
9
00:00:36,900 --> 00:00:37,730
right?
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
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
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
13
00:00:58,290 --> 00:00:59,130
web page.
14
00:00:59,130 --> 00:01:01,230
That's, that's impossible,
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.
16
00:01:05,220 --> 00:01:07,250
You would literally be chained to your web site.
17
00:01:07,380 --> 00:01:12,640
Now this is the problem that the DOM or the Document Object Model solves.
18
00:01:12,720 --> 00:01:19,400
It basically catalogs the web page into individual objects that we can select and manipulate.
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.
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
21
00:01:31,110 --> 00:01:33,920
of our web site that you might see in the browser.
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
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
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.
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.
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
27
00:02:06,960 --> 00:02:09,930
to each other mapped out in the tree diagram.
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
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
30
00:02:24,750 --> 00:02:27,250
is contained in an object called the document.
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
32
00:02:33,780 --> 00:02:35,610
and subordinates all mapped out.
33
00:02:35,610 --> 00:02:39,030
Now there's no point just talking about the DOM without using it,
34
00:02:39,420 --> 00:02:42,310
so let's see it in action in real life.
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
36
00:02:49,470 --> 00:02:54,170
deleted the Javascript and CSS that I was showing you in the last lesson.
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
38
00:03:02,310 --> 00:03:07,170
that says Click Me, and an unordered list with three list items,
39
00:03:07,170 --> 00:03:12,800
the first of which being an anchor tag that points towards google.com.
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.
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
42
00:03:25,770 --> 00:03:28,640
a link to it if you want to check it out as well.
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
44
00:03:35,070 --> 00:03:38,020
code into a DOM tree.
45
00:03:38,490 --> 00:03:42,350
Now you can see that at the top we've got our HTML.
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
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
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.
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
50
00:04:12,630 --> 00:04:13,740
this tree.
51
00:04:14,040 --> 00:04:17,770
So let's just print out and see what the document looks like.
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
53
00:04:23,760 --> 00:04:28,230
this is the entire HTML file that we've currently got.
54
00:04:28,230 --> 00:04:31,260
Now if we want to navigate through this document object,
55
00:04:31,260 --> 00:04:36,510
we can go over to the first element child.
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.
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.
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
59
00:04:55,500 --> 00:04:57,120
child is over here.
60
00:04:57,180 --> 00:04:58,440
It's the head.
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
62
00:05:04,020 --> 00:05:08,790
returned only the head part of our web site.
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
64
00:05:15,280 --> 00:05:17,780
and now I get everything that's inside the body.
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
66
00:05:25,330 --> 00:05:27,600
parts that we're interested in.
67
00:05:27,610 --> 00:05:31,630
So now, what would I have to do in order to select the h1?
68
00:05:31,780 --> 00:05:33,830
Well it's just one level deeper.
69
00:05:33,880 --> 00:05:37,570
It's the first element child inside the body.
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.
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
72
00:05:50,170 --> 00:05:51,460
manipulate it.
73
00:05:51,580 --> 00:05:55,810
So we know that this line of code gets us to our h1.
74
00:05:55,900 --> 00:05:59,860
So I can simply save it inside a variable. So I can say
75
00:06:00,050 --> 00:06:03,650
var heading equals this object,
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.
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".
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
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
80
00:06:38,150 --> 00:06:39,300
inner HTML,
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.
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.
83
00:06:53,210 --> 00:06:57,290
Now there's lots and lots of different ways I can manipulate my objects.
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
85
00:07:03,920 --> 00:07:05,930
= "red",
86
00:07:06,230 --> 00:07:10,790
and that changes my text color of the element that I selected to red.
87
00:07:10,820 --> 00:07:15,270
I can also select elements and make it do things.
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.
89
00:07:24,770 --> 00:07:25,650
querySelector,
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",
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
92
00:07:41,290 --> 00:07:45,030
what click does is that it simulates a mouse click,
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
94
00:07:51,710 --> 00:07:53,150
check that checkbox.
95
00:07:53,150 --> 00:07:54,920
So I'm keeping my mouse down here.
96
00:07:55,100 --> 00:07:56,600
You can see I'm not cheating.
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
98
00:08:03,440 --> 00:08:04,730
an action.
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
100
00:08:14,810 --> 00:08:20,480
something about the object and the methods are the things that the object can do.
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
102
00:08:27,380 --> 00:08:29,250
also has properties and methods.
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
104
00:08:34,850 --> 00:08:35,750
doors.
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,
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
107
00:08:50,210 --> 00:08:52,910
it's all done using the dot notation.
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.
109
00:09:00,200 --> 00:09:02,200
So this is called a getter.
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
111
00:09:09,560 --> 00:09:13,480
the color property of the car is equal to red.
112
00:09:13,490 --> 00:09:19,510
Now with properties we can also set it so we can say car.numberOfDoors,
113
00:09:19,640 --> 00:09:21,880
so the number of doors property of car,
114
00:09:22,070 --> 00:09:24,860
let's change it to 0.
115
00:09:25,280 --> 00:09:27,230
And now our call has no doors.
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
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.
118
00:09:39,620 --> 00:09:41,180
Now what about methods?
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,
120
00:09:49,430 --> 00:09:52,940
then our call will do something.
121
00:09:52,940 --> 00:09:53,900
It will drive.
122
00:09:53,900 --> 00:09:55,520
It will start moving.
123
00:09:56,000 --> 00:10:01,490
And this is when we call a method on our object.
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
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,
126
00:10:15,260 --> 00:10:18,040
so it has to be associated with an object.
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.
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
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
130
00:10:38,240 --> 00:10:39,680
it to do things.
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.
132
00:10:48,050 --> 00:10:54,050
And we've been tapping into those by saying .innerHTML,
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.
134
00:11:00,380 --> 00:11:03,780
And this is how you can tell the difference between a method and a property.
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
136
00:11:09,440 --> 00:11:13,330
they're essentially a function that the object can do,
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.
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,
139
00:11:27,570 --> 00:11:31,690
to change one of its attributes, like changing the href for example.
140
00:11:31,710 --> 00:11:35,540
Now we're going to be reviewing these concepts of object, properties and methods,
141
00:11:35,580 --> 00:11:38,580
so don't worry if it doesn't make sense immediately.
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,
143
00:11:44,910 --> 00:11:48,940
and by doing that we can manipulate our HTML objects.
144
00:11:49,050 --> 00:11:53,910
Now, as a challenge, I want you to look into the resources of this lesson,
145
00:11:53,910 --> 00:11:56,880
where you'll find all three files, index.html,
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,
147
00:12:03,930 --> 00:12:08,030
open it up in Atom, and select the third li,
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
149
00:12:16,410 --> 00:12:18,390
touch the HTML file,
150
00:12:18,390 --> 00:12:23,170
you have to do it inside the console just as I've demonstrated before.
151
00:12:23,220 --> 00:12:26,080
So pause the video now and give it a go.
15583
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.