Original subtitles

All right. So this module is all about the Document Object Model, or what people tend to call the DOM.

So let's learn what this is all about.

Now up till this point our web sites have been static.

We basically planned what content our web site should have and also the appearance of that content.

So we wrote the HTML and the CSS code, then we hit save and refreshed our browser, and there is our

web site.

Now here's a problem. If we want our web site to be interactive, then we need to be able to change parts

of the web site on the fly,

right?

So that means, when a user clicks on a button, we'll need to respond to that by changing the content or

the appearnace of our web site. But once our web site is live on the Internet, we can't sit there and wait for

the user to click on things on our web site and then update the HTML and CSS code, and then reload their

web page.

That's, that's impossible,

and also it'll be a nightmare if you have more than two or three users.

You would literally be chained to your web site.

Now this is the problem that the DOM or the Document Object Model solves.

It basically catalogs the web page into individual objects that we can select and manipulate.

So on the left here we've got the HTML code of a really basic web site.

It's just got a head section, a body section, a title, and a button. And on the right is roughly the structure

of our web site that you might see in the browser.

Now the task of converting an HTML file into the DOM is done by the browser

when you load up the web page. And what it does is that it turns each of these elements and their associated

data into a tree structure with a whole bunch of objects that you can select and manipulate.

So the tree model on the right is usually how you'll see the DOM represented.

You can see that all of the elements in our HTML has been converted into objects, and their relationships

to each other mapped out in the tree diagram.

So, for example, the head section is a descendant of the HTML object, but the head and the body, they're

siblings, they're not descendants of each other. And everything that is contained inside your HTML document

is contained in an object called the document.

And for some of you guys this might look a bit like the organizational structure of a company with bosses

and subordinates all mapped out.

Now there's no point just talking about the DOM without using it,

so let's see it in action in real life.

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

deleted the Javascript and CSS that I was showing you in the last lesson.

So now we only have an HTML document that includes an h1, an input in the form of a checkbox, a button

that says Click Me, and an unordered list with three list items,

the first of which being an anchor tag that points towards google.com.

So this again is a really simple web site, but it now has more elements for us to play around with.

So I've installed an HTML tree visualizer Chrome plugin, which is free to install, and I'll include

a link to it if you want to check it out as well.

But basically what it does is it allows us to visualize what the browser does when it turns our HTML

code into a DOM tree.

Now you can see that at the top we've got our HTML.

So this entire tree is contained inside an object called the document and inside that the first thing

we have is an HTML object which contains two children, the head and the body, and inside the body

there's a further five children, with an h1, an input, a button, a ul, and the script.

So now we can actually tap into the Document Object Model, the DOM, using Javascript, and navigate through

this tree.

So let's just print out and see what the document looks like.

So if you just write document into the console and you expand the output you get back, you can see

this is the entire HTML file that we've currently got.

Now if we want to navigate through this document object,

we can go over to the first element child.

So if I hit enter now you can see that it's giving me everything that's inside the HTML.

Now I can go even further by saying what is the first child of the first child of the document.

So you can see that if the document is all of this and the first child is the HTML, then the first element

child is over here.

It's the head.

And if I hit enter you can see that the Chrome Developer Tools confirms what I just said, and we get

returned only the head part of our web site.

Now if I wanted the body then I can say instead of first element child I can say last element child

and now I get everything that's inside the body.

And you can see we're kind of starting to dismember and dismantle our web site to grab and select individual

parts that we're interested in.

So now, what would I have to do in order to select the h1?

Well it's just one level deeper.

It's the first element child inside the body.

So now if I hit enter you can see I've tapped into our h1 which currently says Hello.

So once you've successfully selected the object that you're interested in inside the DOM then you can

manipulate it.

So we know that this line of code gets us to our h1.

So I can simply save it inside a variable. So I can say

var heading equals this object,

and now you can see if I hit heading you can see it's pointing towards our h1.

So if I wanted to manipulate that heading, then I can simply say heading.innerHTML = "Good Bye".

Now you can see, if you watch over here, that when I hit enter and execute this line of code, I have used

my Javascript to select the h1 element using the DOM, and then I've manipulated it by changing it's

inner HTML,

so the part between the HTML tags here, to say Good Bye, and it gets updated in my web site.

So this is how we can change our web site on the fly using the DOM.

Now there's lots and lots of different ways I can manipulate my objects.

So for example I can say, instead of heading.innerHTML, I can say heading.style.color

= "red",

and that changes my text color of the element that I selected to red.

I can also select elements and make it do things.

So for example, if I wanted to select my input, that's the checkbox, then I can simply say document.

querySelector,

so this looks inside our entire document for the object that has the selector of "input",

and once I have that object selected then I'm going to call a method on it which is to say click, and

what click does is that it simulates a mouse click,

and because I've selected the input, or my checkbox, when it performs the click function then it will

check that checkbox.

So I'm keeping my mouse down here.

You can see I'm not cheating.

And if I hit enter on this line of code you'll see that my checkbox just got clicked, so it performed

an action.

So you can see that our objects inside the DOM can have properties and methods. Now properties describe

something about the object and the methods are the things that the object can do.

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

also has properties and methods.

The car object might have properties such as the color of the car, the number of seats, the number of

doors.

So these are things that describe something about the object. But it also might have methods,

so the things that it can do, namely brake, drive, park. So we can use Javascript to manipulate our objects, and

it's all done using the dot notation.

So if our object was called car, then we can say car.color to get the value of the property.

So this is called a getter.

And in this case if we ran this code it will give us the output of red because the current value of

the color property of the car is equal to red.

Now with properties we can also set it so we can say car.numberOfDoors,

so the number of doors property of car,

let's change it to 0.

And now our call has no doors.

And this is called setting a property. And you can see that the difference between setting a property

and getting a property is simply whether if we assign a value to it with an equal sign.

Now what about methods?

Well, if we call the method drive on the object car, and remember we're still using that dot notation,

then our call will do something.

It will drive.

It will start moving.

And this is when we call a method on our object.

Now up till now I've been using the words methods and functions more or less interchangeably, but the

only difference between a method and a function is that a method is something that an object can do,

so it has to be associated with an object.

And in this case, drive is a method, because it's associated with the car object.

Now if we take a look back at our button object that we managed to select using the DOM, then we're

able to tap into some of its properties to get it and set it as well as use some of its methods to get

it to do things.

So the properties of our button include things like the innerHTML, the text, or the style, or the firstChild.

And we've been tapping into those by saying .innerHTML,

or .style, .color, but methods, you can see, all have a set of parentheses at the end.

And this is how you can tell the difference between a method and a property.

Even though we're using the dot notation to tap into the property or the methods, the methods, because

they're essentially a function that the object can do,

all have a set of parentheses that allow you to potentially give it an input if needed.

Now the methods for a button might include things like click, or appendChild, to add another child on, or setAttribute,

to change one of its attributes, like changing the href for example.

Now we're going to be reviewing these concepts of object, properties and methods,

so don't worry if it doesn't make sense immediately.

All that you need to know is that we can access these properties and methods through using the dot notation,

and by doing that we can manipulate our HTML objects.

Now, as a challenge, I want you to look into the resources of this lesson,

where you'll find all three files, index.html,

index.js, and styles.css, in the current state, and I want you to download it,

open it up in Atom, and select the third li,

and I want you to change the text from the word Third to your name or anything you want, but you can't

touch the HTML file,

you have to do it inside the console just as I've demonstrated before.

So pause the video now and give it a go.