FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 DOM Basics

The DOM is the application programming interface (API) that gives us access to HTML documents. It’s a huge topic, but in this lesson we’ll start with the basics to get a sense of how it can be used in web development.

Related Links

2.3 DOM Basics

In the previous session, we started looking at objects. And objects are very important, because whenever you get into the browser or some other JavaScript environment, just about everything that you're going to be working with is an object. So in this lesson, we are going to be working with this very simple web page. And everything within this web page, this HTML element, this head element, this title element, even the attributes here inside of these other elements, they are all objects. In fact, the whole web page itself is an object. So in order to work with these things, you have to work with objects. And this is what we call the document object model, or DOM for short. It is a set of objects that give us the ability to work with and manipulate a web page. That's what the DOM is. So we are going to add a script element to the bottom of the page. Normally, we would put our JavaScript in an external file. But I want to keep it here so that you can see the relationship between the code that we are writing, and the HTML that we are working with through JavaScript and the DOM. So the first thing we want to do, is retrieve this div element with an ID of main-content. So let's create a variable, because we are going to retrieve that object and we want to store it within a variable so that we can use that variable anywhere else that we might need to. So I'm going to call this mainContent equals. And then we want to retrieve this div element. Now, the DOM is a tree-like structure. Actually, it's kind of a tree in reverse, because at the very top you have your roots. And then everything is contained within that root, so within an HTML document, the HTML element is a root. This is what is containing everything else. And then inside of our root, we have what are called child nodes. So this head element is a child node of HTML. The reason why it is a child is because it is contained within the HTML. So head and body are child nodes of HTML. So since they are both children, they are also siblings to one another. So head is a sibling of body. Now, the div element with an ID of main-content, is a child of body. So if you really wanted to get to this main-content element, you could write something like this. We start with our document. This document object represents the entire document as a whole. And it has a variety of properties and methods that are very useful. But if you wanted to walk the document manually, you would do something like this, document.body. That gives us access to this body element. Now unfortunately, we can't say document.body.div, that's not how it works. Instead, we have to use a property called child nodes. Now remember that I said that everything is an object, so we have our document, which is an object, it has a property called a body. But body is an object, and it has a property called child nodes. Child nodes is what we call a collection. It is a list of values, and in this case, it's a list of objects. So everything that is contained within the body element is actually a child node. So that includes this div element with an ID of sidebar. It also includes this div element with an ID of main-content, but it also includes text as well. Now we don't see any text here, but there's actually text between the body element and this div element. It's white space. So even the white space that we see within our HTML is a node inside of this child nodes collection. So if we wanted to get to this main-content, we would have to say that document.body.child nodes. The first child node is white space. The second child node is this div element. The third child node is the white space between this div element and this other div element. And then finally, the fourth child is this div element with an ID of main-content. So we want to get the fourth child node. So we say childNodes, then we have an opening square bracket. We have the value of three, and then a closing square bracket. But well, wait a sec, I said the fourth. Well in JavaScript, we start counting at zero. And in fact, most programming languages have you start counting at zero as well. There's a few that start with one, but most languages start with zero. So the child node that has, this is what we call an index. An index of zero is the first child node, so that is this text node, this white space. The child node at index of one, that is the second child node. That is this div element with an ID of side bar. So the third is the white space. The fourth, which is an index of three, is our div element. So, this should give us our main-content. And once we have that object, we can then do whatever we want with it. We can change its content itself. We can change its style, we can also change the structure of the HTML document itself. That can be useful in some cases. It wouldn't be in this case. For example, we could take the main-content and through JavaScript, mind you. We could set that before our sidebar. That doesn't give us really anything useful so we're not going to do that, but we have our main-content. Let's go ahead and let's set its color CSS property to red. So we're going to say mainContent.style. This style property maps directly to the style attributes on our elements. Now, we don't have style here, but that doesn't make any difference. The style property gives us the ability to change the style attributes. And by setting a property, in this case color, let's set it to red. Then that is going to add a style attribute to our element. It's going to set the CSS color property to red. So let's go to the browser. Let's refresh, and we see that the content color changes to red. Now if you right-click on this, and go to Inspect, this is going to pull up the Developer Tools. And if you make sure that elements is selected here, this is going to show you the HTML as it is rendered within the page. Now this is not like Viewing the Source. When you view the source of a web page, that is what the web server sent to the browser, and that can be useful. But in our case it's not. Because through JavaScript, we changed the HTML, we added a style attributes to this div element. So if we go back to our developer tools, we can see here that the div element with an ID of main-content now has a style attribute, and it sets color to red. Now, I retrieved this main-content the hard way. We walked through the document structure in order to get to this div element. We don't have to do that. The document object has a method called getElementById. And then you specify the ID of the element that you want to retrieve, so in our case that is main-content, and that is going to give us the same object. So now, with less code, well, it's not less code because typing getElementById and then the element ID itself, that's actually more keystrokes than what we wrote before. However, this is much easier to read, and we know without a doubt what we are retrieving. So, we are retrieving that same element with an ID of main-content. If we go back to the browser and refresh, we are going to see the same results. Well now let's add some new content to our web page. We're still going to work with our main-content object, but we're going to add another element to it. So it's going to have more than just this h1, and this p element. So we're going to do that first of all by creating a new element. Let's just call that pElement. We will create a pElement. We will give it some content, and then we will add it to our main-content. And in order to create an element, we use our document object again. We want to create an element for this document, so we use the document object. And now we use a method called create element. And then we tell it what type of element that we want to create. In this case, it's a p element. So we have our p element. Now we want to give it some content, and we can do that in a variety of different ways, but the easiest way is to use a property called innerHTML. This either gets the content within an element, or it can set the content of an element. So in this case, let's just say that this was added dynamically with JavaScript. And that is going to be the content of this p element. And then we can add our p element to our main-content, and we do this with our main content. This has a method called append child, and we are going to pass in our p element, because our p element is going to be a child of our main-content. So, we can save it, go back to the browser and refresh, and now we see this new content. This was added dynamically with JavaScript. And once again, if we look at the HTML as it is rendered within the page, we have our main-content here, we have the h1 element. We have the p element that was already there in the HTML, and then we have our dynamically created p element. So whenever you are writing code within a web page, you are working with objects, because everything within the web page itself is an object. And we use what's called the Document Object Model, or the DOM to give us the objects and the properties and methods for those objects so that we can work with them. Now the problem with the DOM is that, well it's not the easiest thing to work with. For example, the first time we retrieved this div element with an ID of main-content, we walked through the DOM in order to find that element. And it was pretty cryptic. Now of course, getting an element by its ID is pretty straightforward. But even then, it's not exactly the easiest thing to use. Even setting style for an element could be a little bit better. I guess what I'm saying is that the Document Object Model is what we call a very low level API. API stands for Application Programming Interface. It's just a set of objects. Well, it's what the DOM is. The DOM is an API. It's the objects that we have to work with. And in order to do anything within the DOM, you have to write quite a bit of code. Like for example, in order to dynamically create a new element, give it content, and then to add that element to the page, we had to do that in three separate lines of code. Create the element, give it content, and then add it. So thankfully, there are tools that makes working with the DOM a lot easier than just a plain, ordinary DOM. And of the most popular tool is jQuery. Now jQuery is what we call a dependency. It is code that we haven't written, but somebody else has, and we are using it within our web pages. And managing our dependencies used to be a headache, but now thankfully we have tools that make dependency management much easier. And that's what we are going to look at in the next lesson.

Back to the top