Reaper Blog

Welcome to part two in my series of javascript tutorials. As the title suggests, it is about the HTML DOM (HyperText Markup Language Document Object Model).

A major benefit of javascript is the ability to manipulate parts of a webpage, to make it seem more dynamic. To do this, there obviously needs to be a way for the language to access HTML elements. And it seems we’re in luck, because there are many ways to do this. We can create new elements (one at a time), select existing elements (one or more at a time), and also delete elements (a full tree at a time).

Creating elements is done with the method document.createElement, like so:

var elem = document.createElement("div");

The passed parameter to the createElement function is the name of the tag that you are wanting to create, which can be just about anything (even tags not defined by HTML or XHTML). The returned value is a HTML DOM object, in this case a HTMLDivElement. Notice, though, that the element is not actually placed into the document after this call. The function only creates a javascript object. To actually place it into the document, you need to tell the browser where to put it in the DOM:

document.body.appendChild(elem);

This function will add the div element created above to the body tag of the document, or whatever other element it gets called on. The div element then gets rendered by the browser, but only after the javascript engine has finished executing the current call stack. You can also append many elements into another element, then append that parent element into the document, and all the child elements will get rendered at the same time.

There is more than one way to select an element within the HTML DOM. Some of the simpler techniques are:

var elem1 = document.getElementById("element_id");
var elem2 = document.body;
var elem3 = document.body.childNodes;
var elem4 = document.getElementsByTagName("div");

After these four calls, elem1 will contain a reference to the DOM object for the element with id=”element_id” (as all elements within a HTML document require their ids, if defined, to be unique), elem2 will contain a reference to the body element within the HTML document, elem3 will contain a reference to the array of children elements of the body element, and elem4 will contain an array of all elements on the page that are divisions (divs).

Deleting an element from a document is just as simple as creating and placing an element within a document. It’s made up of two steps, selecting the element you want to remove and removing that element from it’s parent:

var elem = document.getElementById("anElement");
elem.parentNode.removeChild(elem);
elem = null;

The final line of the above code is not required, but decreases a memory leak problem within some versions of Internet Explorer (I’ve never encountered this problem myself, though). After the code has completed, elem and all it’s children will be removed from the document.

“Creating, selecting and deleting elements is good and all, but how do I add text to my document?” I hear you ask. Well, there’s a few different ways. You can go about creating a text node and appending that to an element:

var text = document.createTextNode("some text that you want inside the node");
document.getElementById("paragraph").appendChild(text);

I feel this way is overkill, though. You can always just use elem.innerText or elem.innerHTML, like so:

var elem = document.getElementById("paragraph");
elem.innerText += "some text";
elem.innerHTML += "<br />some more text on a second line";

Obviously, innerText sanitises what you put into it, transforming HTML entities (eg. ‘<‘ becomes ‘&lt;’ and ‘>’ becomes ‘&gt;’). innerHTML, on the other hand, lets you create even more elements without going through the process of creating the physical DOM element yourself.

Some of the fields on elements you’ll want to know for creating dynamic pages are elem.className, which is a string of all the classes of an element (defined with the class attribute), and elem.id, which is the id of the element (again, defined with the id attribute). You can both get and set these fields. There are many more fields on most objects that may be of interest, but talking about them all here would make this post much longer than it needs to be. For those interested, you can check out the HTML DOM in most browsers using the integrated developer tools (or the Firebug addon for Firefox).

In the next tutorial I will be showing you how to create your own classes, so that you can design and construct an object orientated script. Until then, happy coding.
Robert