DOUG LLOYD: In this video, we wanted to call out separate attention
to a very particular element of JavaScript
that you might find handy when you're starting
to work on manipulating web pages and changing the content of your web page
on the fly.
And that's the notion of the Document Object Model.
So as we saw in our video on JavaScript, objects are very flexible.
>> And they can contain various fields.
And though we didn't go into a lot of detail, those fields or properties,
that we would probably more appropriately call them
in the context of an object, even those properties can be other objects.
And inside of those objects can be other objects.
>> You have this very large object with a lot of other objects
inside of it, which sort of creates this idea of a big tree.
Now, the document object is a very special object in JavaScript
that organizes your entire web page under this sort of umbrella
of an object.
And so inside of the document object are objects presenting
the head and body of your web page.
>> Inside of those are other objects, et cetera, et cetera,
until your entire web page has been organized in this big object.
What's the upside here, right?
Well, we know how to work with objects in JavaScript.
>> So if we have an object that refers to our entire web page, that
means by calling the correct methods to manipulate that object
or modifying certain of its properties, we
can change the elements of our page programmatically
using JavaScript instead of having to code things with, say, HTML.
So here's an example of a very simple web page, right?
It's got HTML tags, a head.
>> Inside of there is a title, hello world.
Then I have a body.
Inside of that, I have three different things.
I have an h2 header tag, a paragraph, and a link.
This is a very simple web page.
>> Well, what might the document object for this look like?
Well, it's a little scary maybe at first.
But it's really just a big tree.
And at the very root of it is document.
>> Inside of the document is another object referring to the HTML of my page.
And the HTML of my page is all of this.
And then inside of the HTML object, I have a head object,
which refers to everything there.
>> And inside of there, I have a title object.
And inside of there, I have another object that's just hello world.
I could have my body represented like this.
>> Inside of my body, I have an h2 object and a p object for paragraph
and an a object for a link.
And so this entire hierarchy can be represented as a big tree
with lots of smaller little things coming out of it.
Now, of course, when we're programming, we
don't think of things like a big tree.
We want to see actual code related things.
>> And fortunately, we can use our developer tools
to actually take a look at this website's document object.
And let's do that.
So I've opened up a browser tab.
>> And I've opened up Developer Tools.
And in my video on JavaScript, I mentioned that the console is not
only someplace where we print information,
it's also a place where we can input information.
In this context, what I'm going to say is
I would like to get back the document objects,
so I can start to have a look at it.
So how might I do this?
Well, if I want to organize it really nicely,
I'm going to say console.dir, D-I-R. Now, I use console.log to just print
out something very simple.
But if I want to organize this hierarchically like an object,
I want it sort of structured like a directory structure.
>> So I want to console.dir document.
I'm going to hit Enter.
And right below it now, and I'll zoom in here,
I've got this response document with a little arrow next to it.
Now, when I open this arrow, there's going to be a lot of stuff.
>> But we're going to ignore a lot of it and just kind of focus
on the most important part, so we can begin to navigate this document.
There's a lot more to the DOM than just parent nodes and child nodes.
There's a lot of ancillary stuff.
>> So I'm going to open this up.
And there's a whole lot of stuff that pops up.
But all I care about is right here, child nodes.
Let's open that up.
>> Inside of there I see something familiar, HTML.
So inside of our document one level down, HTML.
I open that up.
What are we expecting?
>> If you recall from our diagram, what should we find inside of HTML?
What two nodes are below it in the tree?
Let's find out.
We open up HTML.
We go down to its child nodes.
>> Pop that open.
There's head and body.
And we can open up the head.
Go to its child nodes.
Well, there's the title.
>> And we could go on and on like this forever.
We could do this with body as well.
But there is a way for us to look at the document organized as a big object.
And if we look at is a big object that looks a lot
like code, that means that we can start to manipulate this big object using
code to change what our website looks and feels like.
>> So that's a pretty powerful tool we have at our disposal now.
So as we just saw, the document object itself
and all of the objects inside of it have properties and methods, just
like any other object that we've been working with in JavaScript.
But we can use those properties and use those methods to sort of drill down
from the big document and get lower and lower and lower,
finer and finer grains of detail, until we
get to a very specific piece of our web page that we want to change.
>> And when we update properties of the Document Object or call those methods,
things might happen on our web page.
And we don't need to do any refreshing to have those changes take effect.
>> And that's a pretty cool ability to have when we're working with code.
So what are some of these properties that are part of a document object?
Well, you probably saw a couple of them really quickly
as we were zipping through the giant document
object we just saw in the web browser.
>> But a couple of these properties might be things like inner HTML.
And you might even recall me using this in the JavaScript video
at the very end when I was talking about events.
What was this inner HTML?
Well, it's just what's in between the tags.
>> And so the inner HTML, for example, of the title
tag, if we had kept going in that example a moment ago,
would have been hello world.
That was the title of our page.
Other properties include node name, which
is the name of an HTML element such as title.
ID, which is the ID attribute of an HTML element.
>> Recall that we can specially indicate specific elements of our HTML
with an ID attribute, which usually comes in handy in the context of CSS,
specifically.
Parent node, which is a reference to what's just up above me in the DOM.
And child nodes, which is a reference to what's down below me.
And we saw a lot of that just looking through.
Child nodes, that's how we got lower and lower into the tree.
>> Attributes, that's just an array of attributes of the HTML element.
So an example of attributes might be if you have an image tag,
it usually has a source attribute, maybe a height and a width attribute.
And so that would just be an array of all of the attributes associated
with that HTML element.
>> Style is another one that does represent the CSS
styling of a particular element.
And later on in this video, we'll specifically
leverage style to make a couple of changes to our website.
So those are some properties.
>> And there are also some methods that we can
use to also more quickly maybe isolate elements of the Document Object.
Perhaps, the most versatile of these being getElementById.
So I might say something like, because remember it's a method of the Document
Object, document.getElementById.
>> And inside of those parentheses, specify an HTML element with a particular ID
attribute that I've previously set, and I'll immediately
go right to that element of the overall website.
So I don't have to maybe drill down through every single layer.
I can just use this method to find it, sort of like a heat seeking missile,
right?
It just goes and finds exactly what it's looking for.
>> GetElementsByTagName is very similar in spirit.
Maybe this would find all of the bold tags or all of the p tags
and give me an array of everything that I could then work with.
appendChild adds something one level down in the tree.
>> So I can add an entire new element one level lower.
Or I can remove an element that's one level lower as well if I want
to delete something from my web page.
Now, a quick coding note and a quick headache saving note, hopefully.
>> getElementById-- the d is lowercase.
I can't tell you how many times I have used getElementById and capitalized
the d there.
Because it's really common.
If we write the word ID, it's usually capital I capital D.
And my code just doesn't work.
And I can't figure out why.
This is a really, really, really common bug that everybody makes,
even experts that have been doing this forever.
So just be aware, getElementById, that d is lowercase.
And hopefully, that saves you several minutes at least of heartache.
>> So what does all of this tell us?
We have these methods.
We have these properties.
Now, if we start from document, document.
whatever, we can now get to any single piece of our web page
that we want to using JavaScript just by calling these the methods
and leveraging the properties that we find at various locations.
>> This can get wordy, this document.getElementByID,
maybe have a long tag name, maybe you do more calls later on.
Things can get a little bit wordy.
And as programmers, as you've probably seen in many of these videos,
we don't like wordy things.
>> We like to be able to do things quickly.
So we would like a more concise way to say something.
So this sort of leads to the notion of something called jQuery.
Now jQuery is not JavaScript.
It's not part of JavaScript.
>> It is a library that was written by some JavaScript programmers
about 10 years ago.
And its goal is to simplify this what's called client side scripting, which
is basically what we were just talking about with DOM manipulations.
And so if I wanted to modify the background color of my web page, maybe
a specific Div.
>> Here, I'm apparently getting ElementById colorDiv.
And I want to set its background color.
If I'm just using pure JavaScript using the Document Object Model,
that's a lot of stuff, right? document.getElementByID
colorDiv.style.backgroundColor=green.
>> Whew.
That was a lot to say.
It's a lot to type, too.
And so in jQuery, we can maybe say this a little bit more concisely.
The trade off being it's maybe a little bit more cryptic all of a sudden,
right?
>> At least the long is a bit more explanatory as to what we're doing.
This dollar sign, parentheses, single quote, hash, colorDiv, right?
What does that mean?
Well, that's basically just document.getElementByID colorDiv.
>> But it's this sort of shorthand way of doing it using jQuery.
Let's just take a look now at a couple of different ways
that I might actually use this Document Object
Model to manipulate pieces of my site.
In particular, we're going to be working on manipulating
the color of a particular Div, colorDiv, on a web page.
So let's take a look at that.
All right.
So I'm on a page.
It's called test.html when you download this if you want to tinker with this.
And I've got a bunch of buttons on this page.
And I'm saying individual functions for background color, purple, green,
orange, red, blue, one single function for background color, event handler
for background color, and using jQuery.
What am I talking about when I'm doing this?
So we've seen the buttons.
Now, let's take a look at some of the source code here.
We'll start with test.html.
So individual functions for background color is what I've typed here.
Let me scroll a little bit.
>> And you'll notice that I have defined these buttons
to say when this button is clicked, call the function turn purple.
When this button is click, rather, call the function turn green,
turn orange, turn red, turn blue.
You can probably guess that this is perhaps not the best design
sense, right?
>> It would be nice if I could have a more general approach.
Well, first we'll take a look at what those five functions are
document.getElementByID colorDiv.style.background=purple,
green, orange, red, and blue, respectively.
So, not particularly the best design.
>> The next set of buttons I have is I've written
a single function called change color that apparently
accepts a string as its argument.
So this is a little bit better.
Purple, green, orange, red, blue is now an argument.
So I've written a more general case JavaScript function,
which might look something like this.
I'm passing in.
This function change color is expecting an argument called color.
And I'm saying set the background color to color.
So here represents what I've got here.
So that's a bit better.
>> But I might be able to do better than that.
If we go down to take a look at the event handler situation,
now all these calls look the same.
If you recall for our discussion on event handlers,
I can get information about which of these buttons was clicked and use that.
>> And so in event.JavaScript, I've written change color event, which
figures out which button was clicked.
That's the trigger object line.
And then here, it gets really wordy.
But what I'm doing is I'm setting the background
color to triggerObject inner.HTML.
That's the text in between the button tags.
>> And then I apparently have to set it to lowercase.
And that's how I can convert an entire string to lowercase in JavaScript using
that method to lowercase.
Because when I set a color, as I'm trying to do here,
the color has to be all lowercase.
>> But the button that I had, if we take another look,
notice that the text there is written with a capital P for purple.
And then at the very bottom here, I apparently
try and do this using jQuery as well.
And in this case, I'm not actually calling a function at all.
I've just said the class that I'm using for this button is a jQ button.
That's it.
>> So how does jQuery know what I'm doing?
Well, this is one of the advantages slash disadvantages of jQuery.
It can allow me to do things very concisely, but maybe not
as intuitively.
Maybe those other three make a bit more sense what I'm doing.
Here, though, what's going on?
>> Apparently, creating an anonymous function
that loads whenever my document is ready, so document.ready,
some function is going to happen.
Basically, when is a document ready?
It's when my page has loaded.
>> So as soon as my page has loaded, the following function is always ready.
It says, if an object of type jQButton, or if class jQButton has been clicked,
execute this function.
So here's two anonymous functions, one defined inside of the other.
>> So my entire context here so far is my page
when it loads it calls this function.
And this function is waiting for a button to be clicked.
And when a button is clicked, jQ button specifically is clicked,
it calls this other function, which is going
to set the background color of colorDiv to be
whatever text is in between the tags.
>> This is the notion of which button was clicked.
But otherwise, this is sort of behaving similar to an event.
It's just the same way I would express this in jQuery.
Again, it's probably a lot more intimidating.
It's not as clear as something like event.js,
which is maybe a little bit more verbose, but a little bit less
intimidating.
>> But if we pop back over to my browser window, if I start clicking-- well,
that changed to purple.
This is green using the string method.
This is orange using the event handler.
>> This is red using jQuery, right?
They all behave exactly the same.
They just do it using different approaches to solve the problem.
There's a lot more to jQuery then we're certainly
going to talk about in this video.
But if you want to learn more, you can go to the jQuery sort of documentation
and learn quite a bit more about this very flexible library, which
is great for doing client side scripting such as what we were doing
to manipulate the look and feel of our web page
with the Document Object Model.
I'm Doug Lloyd.
This is CS50.