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.