Print
Video
Example
The DOM
Attributes
Nodes

Lessons.Ajax.01

Ajax Lesson 1:
The Document Object Model

The DOM

The Document Object Model, or DOM, is a model that web browsers use to turn the HTML of a web page into the content of that page. A web browser uses the HTML on your page to render the page in the browser window, and we can use this fact to change items on a page without reloading the page.

The DOM is similar to a family tree in that there is a single node, or object in the tree, at the top that branches out into other node. In a family we would refer to the top node as the parent, while nodes underneath the parent are children, grandchildren, etc. The parent/child relationship is important in the DOM, as you can refer to the children of a node or the parent of a node.

Family Tree

When you open a web page the page is referred to as the Document Object, and it is the topmost parent of all of the HTML on the page. If you use the Firefox DOM Inspector you will see it referred to as #document.

The first and only child of #document is the HTML tag. In the DOM Inspector you will notice an arrow next to HTML which tells you there are more children below it. The HTML tag should have two children, HEAD and BODY. Within these tags things will differ depending on the web page. You will see many #text nodes that represent text on the page or areas where text may be placed. A lot of times you will see text nodes with other HTML tags as parents, such as heading tags or paragraph tags. These text nodes represent the text inside the parent tag.

You may also notice a number of attributes inside some of the tags. These are the same attributes that are present in HTML such as the href attribute for links, src attribute for images, and align attribute for multiple tags. These attributes are the key to making changes to the DOM on the fly.

Changing Attributes

It is surprisingly easy to change attributes on the fly using Javascript, and we can even create HTML tags or text nodes on the fly if we need to. One of the easiest ways to access nodes is by a node's ID. Since an ID is unique to a particular element on a page we can be certain we are getting what we want. This is the method we will use in class, but there are many other ways to accomplish this task.

  • 1. Create a new HTML page and call it "DOM.html."
  • 2. Add a div to your page.
  • 3. Give the div an ID and call it "title."
  • 4. Create a new Javascript file and call it "change.js."
  • 5. Add the following code to the Javascript file:

function officeSpace()
{
   var titleDiv = document.getElementById("title");

   titleDiv.innerHTML = "<h1>Office Space</h1>";
}

The code above creates a function. Inside that function we create a variable called "titleDiv." That variable stores a node in our document. We find that node by using the getElementById function, which finds a node by its ID.

Once we have found the node we can change its HTML by using the innerHTML function. Whatever you put inside the quotes after the equal sign will replace the current HTML inside the title div.

That wasn't too hard was it? Our final step it to call this function using an onclick event handler.

  • 6. Go to Code View on your HTML page
  • 7. Click in the head section of your page
  • 8. Go to Insert>HTML>Script Objects>Script
  • 9. Create a connection to your Javascript file
  • 10. Add a link to your page.
  • 11. Make the source of the link "#."
  • 12. Add the following onclick event handler:

onclick="officeSpace();"

Clicking on the link should cause the text in your heading to change to "Office Space." If it doesn't change check for errors.

Creating Nodes

Technically, we have already created a node when we created the new text node for the title div above, but what if we want to dynamically create an HTML tag with attributes? Using the innerHTML tag this isn't much harder.

  • 13. Create a new div.
  • 14. Give your new div an ID of "main."
  • 15. Add the following code to the officeSpace function:

var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p><img src='images/office.png' alt='Office Space' /></p>";

The code above does a few things. First, a variable is created called "mainDiv" that holds the node for our div. Second, we change the HTML of the main div to hold a paragraph and an image. You won't see the image unless you have one in your images folder called "office.png," but you can rename an image you already have to test it out. You can use innerHTML to put any HTML code dynamically into a container on your web page.