6.1 DOM Basics

The document object model or DOM, D-O-M is what we use to interact with a web page. We use it to first of all find the elements that we want to work with. And then we can do just about anything that we want. We can change the content or change this style, we can even remove an element completely from the page. And we can create elements and we can also add them back to the page. So there's a lot that we can do. In this lesson we're going to do something very simple and that is simply change the background color of our page. So the first thing that we need to do, is access the document object. This represents the entire HTML document that is loaded within the page. So just like in the previous lesson, where we grouped the first name and last name and the greet all within a single object. That is essentially what's being done for the document. So all of this HTML is being encapsulated inside of this document object. And then from here, we just need to access. The things that we want to access, we want to change the background color of the body. So we will access the body with the body property, and this maps directly to the body element within our page. Now from here we have a variety of ways that we can change the background color. Used to, we would have a BG color attribute that we could use. Now this is deprecated and we don't typically do this anymore. But if we wanted to change the background color to gray, then we could do that with that BG color. And we can do the same thing with JavaScript, we can access that BG color attribute and assign a new color to it. So we will just have BG colors equals gray in this case. And so whenever we save it, then we can see the background changes to gray. Now, one thing I want you to notice is how we Specified BG color. Inside of HTML, it doesn't matter. We can have BG color, all lowercase. It can be all uppercase, it can be a mix of upper and lower. Now JavaScript is case sensitive. That means that well, you have to be careful as to your casing and it uses what's called camel casing. And it's called camel casing because of the humps caused by uppercase characters. So for example, let's say that we have the first name variable. First Name is actually two words but together so the first word is all lowercase. And then the second word begins with an uppercase IN. And we would do the same thing for last name if we had a variable called my secret name. It would look like this, my would be a lowercase secret would begin with an upper case S. A name would begin with an uppercase N. And so, we have our camel hump for the S, and then for the N. So that's just where camel casing gets its name. Now, as I said, JavaScript is case sensitive. So there's a difference between my secret name camel cased, and then my secret name, all lowercase. Those are two completely different variables. So as you are writing your code you need to be aware of the casing. Okay, so we change the background color using the BG color property. Now, something else I want to point out. Whenever we are talking about JavaScript, we are using properties. Even though this BG color property maps directly to the BG color attribute in HTML. HTML has attributes. JavaScript has properties, so it can get a little confusing. So instead of using BG color, we want to use a CSS. Because that is the quote unquote correct way of doing it now, and we could do this in a variety of different ways. But if we were going to do this in HTML, probably the easiest thing to do would be to use the style attribute. So that we could set the background color to grey here. So let's go ahead and do that. And whenever we save that, of course, our background is still going to be grey. But let's say that okay, now we want to change the background color back to white using JavaScript. Well we simply use the style property, this maps directly to our style attribute. And we can override the style that is defined inside of our HTML. So all we have to do then is then set the background color property. And we do that with background color. Now once again, we are using camel case here because a hyphen Is an invalid character. Well, it's not invalid. in JavaScript a hyphen is used for subtraction. We can't use it within the name of a variable or property or function. Instead, we have to use camel casing. But it's very simple because it's all basically the same except that instead of having a hyphen and then a word after it. It's all camel cased. So it's background color, and then we will set that to white. So whenever we save, our background color is white. Now the reason why this is overriding what we have defined inside of our HTML. Is because our JavaScript is being loaded after the browser has loaded the opening body tag. And it's just as simple as that. Our JavaScript typically executes after the page is loaded. So it's going to override whatever is defined inside of the HTML. Now one very important thing to remember, however, is where your scripts are defined. Let's do this. Let's change this, so that instead of our HTML we are setting the background colour to white. And then, inside of our JavaScript, it's going to be grey. And then, we're going to move our script so that it is not inside of the body tag, but it's going to be up here inside of the head tag. If we save this, we should see our background color as grey. But we don't, it's white. And the reason is very simple. Let's go to the browser. And let me maximize this. Let's press F 12 to pull up the developer tools. And you want to go to the console, because the console is very important. Because anytime that there's an error there is going to be an entry in the console. And we can see here, the uncut type air cannot read property style of no. So the only place that we have used style is inside of our JavaScript code. And that was on the body object. So this is basically saying that we can't access style because body is no. Well, how does that make sense because body is right here? Well, it's very simple. And this is going to cause you problems because well it still causes everybody problems eventually. Well, our JavaScript code is loaded up here in the head. And at the time that this code executes, the body element has not been loaded into the browser. You cannot access an object that is currently not loaded. So it's just that simple. We are trying to access the body, the browser hasn't loaded the body yet. So therefore body is no, we can't change the style because no does not have a style property. So whenever you are defining your scripts inside of your HTML. Typically the best place to do that is down inside of the body at the very bottom. So that all of your content like a div element, let's go ahead and give this an ID of message. All of the content will be loaded first before your code is ever loaded. That way you can be sure that everything is loaded in the browser. And you won't run into any errors. And now that our script is inside of the body, the browser has loaded that body element before we tried to access it, the error goes away. And more importantly, our code executes. Well in the next lesson, we are going to do something with that div element that we just created. We want to manipulate that element, but first we have to find it and you will learn how to in the next lesson.