[MUSIC PLAYING]  DOUG LLOYD: So in our video on JavaScript, we introduced you to the concept of an object. And in this video, I want to talk about a very specific object that we can use to manipulate data and content on our web pages called the document object.

Now, you may recall from that discussion in the JavaScript video that objects contain two different things, basically. They contain something called properties or data. And they contain methods, which are functions that apply just to those objects. But what we didn't really get into a lot of detail was that those objects, what you can put in them is actually pretty flexible.

You can do a lot of different things with them. You can not only put data in there. You can also put other objects or arrays inside of it. And maybe those objects that you put inside of that bigger object also have other objects in them. So you can kind of create this nesting structure of objects within a single JavaScript object, which, if you think about it, thinking back to our discussion about C and trees, it kind of creates a tree structure where you have one object, inside of that there's another one, inside of those, there's other ones, and so on.

One very specific object in JavaScript is called the document object. And that is an object that basically organizes the entire content of a single web page into a single JavaScript object. And once you know the methods and properties of the document object, you can change them in JavaScript. You can assign the different properties to a value. You can call methods on the object to change some of those properties, which then allow you to manipulate the content or look and feel of your website only using JavaScript, instead of going back and editing your HTML or the Python that underlies it.

So here's an example of a very simple HTML website. There's really not much going on here. But as you can see, there's HTML tags. We have inside of that a head and a body. Inside of the head, we have a title, "Hello, world." Inside of the body, we have a couple of different tags there. We have an H2, or a second-level header tag, a paragraph tag, and a link. And all of this can actually be represented in JavaScript as a document object. We can actually arrange all of this hierarchically, sort of similar to what we're doing with the indentation, where clearly things that are indented one level further in are nested with inside of another-- nested inside of another part of the HTML.

So for example, here is what a tree structure of that simple web page we just looked at might be. So we have a document. And inside of that, we have HTML. And that's kind of represented by the HTML tag that we have. And everything inside of it is sort of nested below it, as you can see. Within our HTML, there are two main things at the next level down. There is the head and the body. So we can look specifically at the head. And we see that inside of the head, there is a title. And inside of the title, there is some text, "Hello, world." And we can also look at the body, which is an entirely different segment of the object or of the tree, inside of which is each of those three individual pieces, the h2, the p, and the a tag. And all of that can be represented sort of in a tree, which maps, as you can see, as I'm highlighting the text in green on the HTML, to a section of our HTML as well. So the document object has properties, just like any other object. And it has a number of methods as well. And if you, again-- and we're going to talk about this in just a moment-- know how to navigate through the document object, starting at the top and drilling down to the section of the page that you want, you can change what your site looks like.

So actually, let's go into the IDE and take a look at how you can see the document object yourself in the browser. OK. So we're in my IDE and I'm really quickly just going to show you that this is exactly the same HTML that we had just a moment ago on a slide. And I have page actually open in another tab here. And you'll also notice that I popped open my Developer Console. If you're using Google Chrome, you can usually do that with Control-Shift-J on a PC, or Command-Shift-J a Mac. And that just opens the JavaScript Console. And recall from our JavaScript video that we can use the Console using console.log, for instance, to print out information to the Console as we're going through our page.

Well, there's other things we can do with the Console as well. We can also type commands to it to have it do something. And so what I'm going to do this time is something a little bit different. Instead of typing console.log, I'm going to type console.dir. And what console.dir is going to do is it's going to basically try and organize the content of my page here in a directory structure, which basically is a fancy way of describing an object. So we can kind of look and see what's in the object. And what object do I want to look at? Well, I want to look at the document object, so I'm going to console.dir document. And when I hit Enter here, we're going to see that I got an undefined.

But above that I have this sort of pound sign document. That is the JavaScript Console returning to me the document object. When this pops open, there's going to be a lot of stuff in there. And a lot of it we're not going to really talk about. I just want to show you how things are nested in that document object. So I'm going to pop this open. And again, there's a lot of stuff here. But what I really want to take a look at is the children, so just looking at the children property of the document object. And you can see that there is one. If I pop that open, what do you see here? Inside of the document object, there is one child called HTML, which you might recall from our diagram a few slides ago. If I pop that open, you'll see that it also has children, two of them in fact, head and body. And I can continue doing this exercise all the way down.

But in fact, if I kept doing that and I looked inside of the head, I'd find the title tag. I could open that and see what's in there. Inside of the body I would find that there are three children, the h2, the p, and the a tag. All of them are nested inside of this big document object. And we can actually manipulate this object using JavaScript.

Let's go back to the slides and talk a little bit about how we might be able to do that. So again, the document object, as you could see from when we were just looking at it in the Console, is pretty big. There's a lot of stuff in there. We're not going to cover all of it, because not all of it's going to be really necessary as you get started working with it. But I want to cover a couple of the big properties that you might use when you're working with the document object, as well as a couple of the methods in just a moment.

So one of them, for example, is InnerHTML, which holds the HTML inside of a set of tags. So for example, the InnerHTML of the title tag, if I was to go into that section, would be "Hello, world" or whatever I called-- whatever my actual title of my page is. That's the InnerHTML of the title tag or the title node or the title object within the overall document object. nodeName similarly would just be title for the node we were just describing, or the section of the object we were just describing.

Id. You may recall from our video on HTML and CSS that we can specify an optional ID attribute to certain HTML elements. We usually use this in the context of CSS, for example, to style one particular node or one particular set of tags in our HTML with a certain style. We can give it an ID so that the CSS knows which section of the page to apply that style to. So this property would just allow us to figure out what the ID of that particular node is. parentNode is a reference to the node one level up.

So again, if I'm looking at the title node-- I'll just continue using that example for now-- the parent node of that would be head, because title is nested inside of head in that tree structure. childNodes is sort of the converse of that. It is what is down from where I currently am. So if I am now using the body node as an example, so we've kind of nested to that section of the tree, the child nodes of the body node would be that h2 and that p and that a. Those would be the three child nodes from that area. attributes, an array of attributes of an HTML element. A good example here is the image tag.

So if I am, again, navigating through the document object using JavaScript and I come to an image tag and I want to figure out what attributes it has, well, you may recall that an image's attributes include, for example, its source. What is the source file? Or perhaps I've also specified optional parameters of height and width. Those would all the attributes associated with that particular node of the document object. And then style, which is one way-- which is another way we can actually style the look and feel of a page. And in a few moments, we'll actually be going through an example, where we specifically manipulate this property, the style property, to change something. But it is analogous to the CSS styling of a particular section or portion of the page. So those are some of the most common properties. There are also four common methods that you might see. And again, there are many more beyond this. But here are four that you might use as you're beginning to work with the document object. getElementById. And notice that now because we're talking about methods, these are all functions that may optionally take parameters.

In this case, we're looking for an element with a specific ID. That's the parameter being passed in there. So if we maybe have styled a particular element using CSS and we've given it that optional ID attribute, this method would go and navigate through the entire document object for us and find that specific node, one of those further down the tree or further nested within the object. It would find that section of the page and return to you the M object from that point down. getElementsByTagName. Notice it's getElements. This would, for example, maybe find all of the instances of me using a B tag. So it would give me an array of all of the bold tagged sections of my site. appendChild basically allows me to add an additional node below where I currently am, so it allows me to expand the number of things. I might want to add a new element on the fly to the body portion of my website. I can append perhaps a new paragraph tag or an H3 or something else that wasn't there before using this method here. And then removeChild is sort of the opposite of that. It deletes a section of the page by removing that portion of the HTML, that entire node, from the document object.

I do want to point out one thing here that causes programmers a lot of heartache. I know it's caused me a lot of heartache. When you're using the getElementById attribute, notice that the D in Id is lowercase. Usually when we use the term ID for identification, it's usually capital I, capital D. I can't even tell you how many times I have accidentally typed capital I, capital D here. And then I get a JavaScript error, because it doesn't know what I'm talking about. So calling this out specifically as a well-known common issue, be really careful when using this to use a lowercase D there instead.

So because the document object is one big thing with lots of objects nested within it, if we start at the top, we can find our way using those properties and methods to any other area within the document object. Now, you may have seen that some of those terms, some of those property names and some of those method names are really, really long. It would be a lot to type out to do that. And so it's actually quite common when you are working on a project that has a lot of document object manipulation to use a JavaScript library called jQuery.

jQuery is quite popular. It's probably the most popular JavaScript library currently in use. It's been around for about 10 years now. It's an open source library. And it does a lot of things. But one of the things it does particularly well is simplify what's called client-side scripting, or where you are writing some code to change things on your computer to affect the look and feel of a site. Document object manipulation is one of those things it does really well. And it also does AJAX queries, which we'll talk about in another video on AJAX, quite well also. So for example, the raw JavaScript version of this, what we're doing here in this raw JavaScript is changing one section of the page. I'm finding the element of my page whose ID is colorDiv. So I'm starting from the top of the document. It's going to look through the entire document object, all of those nested nodes below it, to find a section of the page called colorDiv. And I'm going to go there and set that node's style property's backgroundColor property to green.

So basically, all that's happening here is I'm changing the background color of one section of my page to green. That is a lot to type to do that in pure JavaScript. In jQuery, the trade-off is you get a shorter-- you have to type less stuff. You have a shorter line of code. But it's going to look a little bit more weird. So this would do exactly the same thing using jQuery syntax. The dollar sign is a shorthand way of saying jQuery. And it's going to be looking for a section of my page called colorDiv. That's the jQuery syntax for it. And I'm going to change that node's CSS background color to green. Again, it's a little bit strange. But it is a shorter way to do the same thing. So you will often see this as opposed to the longer JavaScript version when you're seeing some client-side scripting.

What I want to do now is go back into the IDE and show you a little bit about how-- show you a couple of examples of how we can actually manipulate the document object using JavaScript and jQuery to change the color of a section of a web page. All right. So here is a very simple web page-- and you can download this example when you're reviewing this video-- that has a whole bunch of different buttons. And as you can see at the top, there's a section that says "Change my color!" We're going to be trying to change the background color of that section of the page. And apparently, I'm going to do it four different ways.

There's individual functions for background color written in JavaScript; a single function to change the background color, so a bit of a design improvement perhaps; an event handler-- recall from the end of our video on JavaScript, we talked a little bit about event handlers, so this will be another opportunity to see those in action-- and one example where we do the exact same thing using jQuery instead of using raw JavaScript. So let's take a look at what the code for this site actually looks like.

In my IDE we'll open this tab. As you can see, I'm loading a couple of different JavaScript scripts at the beginning of my page, so I'm basically doing a pound include, the analogy here from C, of a couple of JavaScript files. And I have one file for each of the four different types of color manipulation we're going to do. And then here, it's not particularly well designed HTML, but it kind of gets the job done. I have one section with a set of five buttons for the background color ones, one for the passing in the color as a parameter, one for the event handler, and one for the jQuery ones. And they all look a little bit different.

So let's start by looking at the individual color ones.  So there's really not much to this. You saw that I wrote those five different functions, turn purple, turn green, turn orange, turn red, and turn blue. And all they do is, using pure JavaScript, they get the element by ID of colorDiv, which is the element that we're trying to change the background color of. And I set it's style backgroundColor attribute to purple, green, orange, red or blue, as described. So that's hopefully the most obvious. Then we have sort of a general purpose one, where instead we're passing in a color as a parameter.

So you may recall, looking back at our HTML for a second, for that one I'm passing in the colors purple, green, orange, red, and blue as parameters to that function. And in the general purpose one, I'm just saying whatever I passed in as a parameter, set the colorDiv's backgroundColor to that color instead. Then we have the event handler on. So recall-- if we take a look at the event handler one, the line looks exactly the same for all five of them. But you might remember from our discussion on event handlers that the way an event handler works is when you click on a button, for instance, the event handler captures some information about what triggered it to happen. So it knows, for example, which button you clicked. And all of those buttons-- I'm going to jump again to the HTML for a second. All of those buttons have a different title, purple, green, orange, red, and blue, with the capital letters there, that is the word that is actually going to appear on the button.

So I have a little bit of a way to distinguish between all of them. But as it turns out-- sorry about that. As it turns out, in order for my color changing to work, I can't pass in a capital letter color name. I have to pass in a lowercase one. So what I'm going to do instead is I'm going to set the document's-- the colorDiv's backgroundColor to whatever object triggered the event to be called in the first place. I'm going to look at its InnerHTML-- so here's that InnerHTML property coming into play.

And what I'm going to do to it is transform that entire string, so that capital P purple, into lowercase. So basically what happens here is when I click on a button, say I click on the purple button, what is happening is that capital P purple is being turned into all lowercase purple. And then that word "purple" is going to become the color that I'm setting the backgroundColor to. So hopefully that makes sense. Again, what I'm doing is I'm clicking on a button. That button has a title. I'm just taking the title of that button, the InnerHTML turmoil between the button tags, making it all lowercase. And that is then a color that I can assign the backgroundColor to. Again, you might play with this yourself when you're tinkering if you're following along with this video and maybe set some other different colors to see that you can make this change as well. And then we have the jQuery version of this. And we'll take a look at the HTML again for a second here.

Notice with this one, it looks a little bit different. I'm not specifying an onClick attribute this time. I'm creating a new class called a jQuery button. But there seems to be no function that gets called. Well, that's kind of a side effect of what is happening in jQuery. And the way jQuery works-- or one of the ways jQuery can work is that we can do something like this. This uses anonymous functions. Remember from JavaScript that we have this notion of anonymous functions. We can have functions that don't have names. So what's happening here is when the document-- there's that word "document" again-- when the document object is fully loaded or ready, the page is going to execute the following function. It's going to say, I'm going to look for every instance of something being of class-- that's what the little dot there, remember that from CSS-- of class JQ button appears on the page. And when any of those buttons is clicked, I'm going to execute this other anonymous function that is going to do basically what we just saw in the final example there, where we transformed the entire text of the button into lowercase and that becomes a color name that we can assign. But I'm just going to do it using jQuery syntax instead of JavaScript syntax. So again, what is happening here is the document, the page is fully loaded. And when the page is fully loaded, the following function is applied to the page.

Every jQuery button is given this extra attribute, this onClick attribute, such that when you click it, it assigns a color based on whatever the text is of the button. Again, we're not going to get into a lot of detail on jQuery itself. That's sort of an exercise for at home. But this version that you're seeing here is exactly the same as the event handler version we just saw for pure JavaScript, except written in jQuery style. And if I actually go to the page, all four of these do in fact work. I can click the purple one here, the green one here. I can click the orange one, red one. They all do the exact same thing. They just do it doing a couple of different-- using a couple of different techniques. So you can hopefully use this example to give yourself a better understanding of using functions in JavaScript, using events in JavaScript, and perhaps dipping your toe in the water of jQuery.

So if you want to learn more about jQuery beyond what we talk about in this video, you can go to the jQuery documentation, which is available at the website you see on the screen here. It's a great place to go to learn about some of the more interesting things that you can do with jQuery. And we'll see a little bit more about this in our video on AJAX as well.

I'm Doug Lloyd. This is CS50.