All right. So this module is all about the Document Object Model, or what people tend to call the DOM. 1
So let's learn what this is all about. 2
Now up till this point our web sites have been static. 3
We basically planned what content our web site should have and also the appearance of that content. 4
So we wrote the HTML and the CSS code, then we hit save and refreshed our browser, and there is our 5
web site. 6
Now here's a problem. If we want our web site to be interactive, then we need to be able to change parts 7
of the web site on the fly, 8
right? 9
So that means, when a user clicks on a button, we'll need to respond to that by changing the content or 10
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
the user to click on things on our web site and then update the HTML and CSS code, and then reload their 12
web page. 13
That's, that's impossible, 14
and also it'll be a nightmare if you have more than two or three users. 15
You would literally be chained to your web site. 16
Now this is the problem that the DOM or the Document Object Model solves. 17
It basically catalogs the web page into individual objects that we can select and manipulate. 18
So on the left here we've got the HTML code of a really basic web site. 19
It's just got a head section, a body section, a title, and a button. And on the right is roughly the structure 20
of our web site that you might see in the browser. 21
Now the task of converting an HTML file into the DOM is done by the browser 22
when you load up the web page. And what it does is that it turns each of these elements and their associated 23
data into a tree structure with a whole bunch of objects that you can select and manipulate. 24
So the tree model on the right is usually how you'll see the DOM represented. 25
You can see that all of the elements in our HTML has been converted into objects, and their relationships 26
to each other mapped out in the tree diagram. 27
So, for example, the head section is a descendant of the HTML object, but the head and the body, they're 28
siblings, they're not descendants of each other. And everything that is contained inside your HTML document 29
is contained in an object called the document. 30
And for some of you guys this might look a bit like the organizational structure of a company with bosses 31
and subordinates all mapped out. 32
Now there's no point just talking about the DOM without using it, 33
so let's see it in action in real life. 34
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
deleted the Javascript and CSS that I was showing you in the last lesson. 36
So now we only have an HTML document that includes an h1, an input in the form of a checkbox, a button 37
that says Click Me, and an unordered list with three list items, 38
the first of which being an anchor tag that points towards google.com. 39
So this again is a really simple web site, but it now has more elements for us to play around with. 40
So I've installed an HTML tree visualizer Chrome plugin, which is free to install, and I'll include 41
a link to it if you want to check it out as well. 42
But basically what it does is it allows us to visualize what the browser does when it turns our HTML 43
code into a DOM tree. 44
Now you can see that at the top we've got our HTML. 45
So this entire tree is contained inside an object called the document and inside that the first thing 46
we have is an HTML object which contains two children, the head and the body, and inside the body 47
there's a further five children, with an h1, an input, a button, a ul, and the script. 48
So now we can actually tap into the Document Object Model, the DOM, using Javascript, and navigate through 49
this tree. 50
So let's just print out and see what the document looks like. 51
So if you just write document into the console and you expand the output you get back, you can see 52
this is the entire HTML file that we've currently got. 53
Now if we want to navigate through this document object, 54
we can go over to the first element child. 55
So if I hit enter now you can see that it's giving me everything that's inside the HTML. 56
Now I can go even further by saying what is the first child of the first child of the document. 57
So you can see that if the document is all of this and the first child is the HTML, then the first element 58
child is over here. 59
It's the head. 60
And if I hit enter you can see that the Chrome Developer Tools confirms what I just said, and we get 61
returned only the head part of our web site. 62
Now if I wanted the body then I can say instead of first element child I can say last element child 63
and now I get everything that's inside the body. 64
And you can see we're kind of starting to dismember and dismantle our web site to grab and select individual 65
parts that we're interested in. 66
So now, what would I have to do in order to select the h1? 67
Well it's just one level deeper. 68
It's the first element child inside the body. 69
So now if I hit enter you can see I've tapped into our h1 which currently says Hello. 70
So once you've successfully selected the object that you're interested in inside the DOM then you can 71
manipulate it. 72
So we know that this line of code gets us to our h1. 73
So I can simply save it inside a variable. So I can say 74
var heading equals this object, 75
and now you can see if I hit heading you can see it's pointing towards our h1. 76
So if I wanted to manipulate that heading, then I can simply say heading.innerHTML = "Good Bye". 77
Now you can see, if you watch over here, that when I hit enter and execute this line of code, I have used 78
my Javascript to select the h1 element using the DOM, and then I've manipulated it by changing it's 79
inner HTML, 80
so the part between the HTML tags here, to say Good Bye, and it gets updated in my web site. 81
So this is how we can change our web site on the fly using the DOM. 82
Now there's lots and lots of different ways I can manipulate my objects. 83
So for example I can say, instead of heading.innerHTML, I can say heading.style.color 84
= "red", 85
and that changes my text color of the element that I selected to red. 86
I can also select elements and make it do things. 87
So for example, if I wanted to select my input, that's the checkbox, then I can simply say document. 88
querySelector, 89
so this looks inside our entire document for the object that has the selector of "input", 90
and once I have that object selected then I'm going to call a method on it which is to say click, and 91
what click does is that it simulates a mouse click, 92
and because I've selected the input, or my checkbox, when it performs the click function then it will 93
check that checkbox. 94
So I'm keeping my mouse down here. 95
You can see I'm not cheating. 96
And if I hit enter on this line of code you'll see that my checkbox just got clicked, so it performed 97
an action. 98
So you can see that our objects inside the DOM can have properties and methods. Now properties describe 99
something about the object and the methods are the things that the object can do. 100
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
also has properties and methods. 102
The car object might have properties such as the color of the car, the number of seats, the number of 103
doors. 104
So these are things that describe something about the object. But it also might have methods, 105
so the things that it can do, namely brake, drive, park. So we can use Javascript to manipulate our objects, and 106
it's all done using the dot notation. 107
So if our object was called car, then we can say car.color to get the value of the property. 108
So this is called a getter. 109
And in this case if we ran this code it will give us the output of red because the current value of 110
the color property of the car is equal to red. 111
Now with properties we can also set it so we can say car.numberOfDoors, 112
so the number of doors property of car, 113
let's change it to 0. 114
And now our call has no doors. 115
And this is called setting a property. And you can see that the difference between setting a property 116
and getting a property is simply whether if we assign a value to it with an equal sign. 117
Now what about methods? 118
Well, if we call the method drive on the object car, and remember we're still using that dot notation, 119
then our call will do something. 120
It will drive. 121
It will start moving. 122
And this is when we call a method on our object. 123
Now up till now I've been using the words methods and functions more or less interchangeably, but the 124
only difference between a method and a function is that a method is something that an object can do, 125
so it has to be associated with an object. 126
And in this case, drive is a method, because it's associated with the car object. 127
Now if we take a look back at our button object that we managed to select using the DOM, then we're 128
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
it to do things. 130
So the properties of our button include things like the innerHTML, the text, or the style, or the firstChild. 131
And we've been tapping into those by saying .innerHTML, 132
or .style, .color, but methods, you can see, all have a set of parentheses at the end. 133
And this is how you can tell the difference between a method and a property. 134
Even though we're using the dot notation to tap into the property or the methods, the methods, because 135
they're essentially a function that the object can do, 136
all have a set of parentheses that allow you to potentially give it an input if needed. 137
Now the methods for a button might include things like click, or appendChild, to add another child on, or setAttribute, 138
to change one of its attributes, like changing the href for example. 139
Now we're going to be reviewing these concepts of object, properties and methods, 140
so don't worry if it doesn't make sense immediately. 141
All that you need to know is that we can access these properties and methods through using the dot notation, 142
and by doing that we can manipulate our HTML objects. 143
Now, as a challenge, I want you to look into the resources of this lesson, 144
where you'll find all three files, index.html, 145
index.js, and styles.css, in the current state, and I want you to download it, 146
open it up in Atom, and select the third li, 147
and I want you to change the text from the word Third to your name or anything you want, but you can't 148
touch the HTML file, 149
you have to do it inside the console just as I've demonstrated before. 150
So pause the video now and give it a go.