An introduction to the Document Object Model

by Curtiss   |   last updated March 6, 2024   |   Javascript Tutorials · programming · Web 2.0 ·

Overview

In the near future, I plan to write a rather in-depth tutorial explaining how to manipulate the Document Object Model (DOM) using JavaScript.

Essentially, that tutorial will teach how to properly add and remove elements from your Web pages using javascript. If all goes well, that tutorial will be simple enough for beginners to understand, and will help add a lot of power to your javascript arsenal.

However, before I can get into that, we need to explore and understand the DOM.

Document Type Definition (DTD)

Basically, every well-formed page on the Web is made up of what are called “document objects”.

What that means is, all HTML files are basically a specific breed of XML (eXtensible Markup Language) files. The follow a strict set of rules that governs how tags are supposed to be used and where those tags (and the elements within them) can appear.

When moving onto XHTML, the new wave of HTML, which is much more heavily based in XML than its predecessors, each element within the HTML file is supposed to have an opening tag and a closing tag (except in the case of special tags, which can be self-terminating, like the img tag and the br tag).

Tags are not supposed to be improperly nested (in other words, you cannot open one tag, then open a second tag, then try to close the first tag before closing the second tag).

Further, a well-formed XHTML document actually specifies a document type definition (DTD), which is a file that specifies which elements are allowed and where they are allowed within a file. A DTD is a necessary part of XML programming. Without a DTD, there is no definition of the structure of a file, which means that there is no way to validate it, nor is there any reliable way to process it.

It should be noted that there is a new method of defining the structure of XML files, called the W3C schema, which offers a lot more options than a standard DTD, but it has yet to be widely supported, so the DTD is what we will focus on for the purposes of this article.

In a normal XML file, a DTD can be extremely simple. There really only need to be three parts to a DTD. The DTD needs to have a doctype definition. That doctype is basically a name for the type of file it is intended to be.

The doctype will also be used as the root element within the file, and all information in the file will need to be wrapped inside of that doctype.

Next, a DTD needs an element definition. The first element definition needs to have the same name as the doctype declaration, otherwise the XML file will fail validation. The element definition is a line of code that tells the processing program (in the case of XHTML, the browser) which tags are allowed inside the document.

Finally, for each element definition, a DTD needs to specify what type of information is going to be found within each of the elements inside of that root element. Additionally, if you are going to have a DTD that allows nested tags (one set of tags inside of another set of tags), the DTD needs to specify which elements might be found within that element, and then needs to include a definition for each of those elements.

Therefore, a very simple DTD could look like:

<!DOCTYPE test [
<!ELEMENT test (newtest)>
<!ELEMENT newtest (#PCDATA)>
]>

Obviously, however, the DTD for an XHTML file will be infinitely more complex than that definition, allowing all sorts of elements within other elements, etc.

For more information on DTDs, you can visit XMLFiles.com, which is a great resource for XML information. You can also visit W3Schools and read up on their XML tutorials.

Document Object Model (DOM)

Now that we’ve explored the DTD a little bit, it’s time to look at the DOM. The DOM is essentially a tree (or outline) based on that DTD. When you create a file, each element you define within that file becomes a branch on the DOM. The elements inside of the DOM have very simple relationships. There are four terms you truly need to understand in order to begin manipulating the DOM.

Those terms are: documentElement, parent, child and sibling. The documentElement is the root of the entire document. That element is going to be the one you defined as the doctype in your DTD. In the case of an XHTML file, the documentElement is the “html” tag. All data in the document needs to be nested inside of that documentElement, otherwise it will fail, and will be nearly impossible to parse with any program.

Parent is a relative term that simply refers to the element within which the current element is nested. For example, if you use the following code:

<div><img src="test.gif" /><p>This is a test</p></div>

The div tag in that code is the “parent” of the img tag and the p tag. Similarly, the img tag and the p tag are the “child” elements of the div tag. Further, the text “This is a test” is a child of the p tag.

Finally, you need to know what a sibling is. In the code above, the p tag and the img tag are “siblings”, meaning that they occur at the exact same level inside of the DOM. If we were to look at an outline of the code above, it would look something like this:

1. Div
   1. img
   2. p
      1. This is a test

You can see from that outline that the img tag and the p tag are on the same level in the outline. That makes them siblings.

You can also see that “This is a test” is the child of the p tag. It is important to realize that that text is not the child of the div tag. In order to access the div tag from within that text, you would need to go up two levels, meaning that you would need to find the parent of its parent. In the DOM, there is no concept of “grandparents” or anything like that, so you will need to access elements one level at a time.

More information about the DOM and its implications and implementations can be found on XMLFiles.com and at W3Schools. Finally, within any document based on XML (meaning that you can use this with regular XML files, as well as XHTML files), there is a specific set of functions that can be used to manipulate the DOM. You can add elements, remove elements, shift elements around and more.

Hopefully this introduction has helped you understand the way an XHTML file is interpreted, and the ways that we might be able to manipulate that structure. In my next post, I will explain how we can use the DOM functions inside of javascript to dynamically change our Web pages. All of this will become immensely important if you start looking into using AJAX, which seems to be the way of the future.