The DOM and JavaScript

Table of contents

1. 1. The Big Picture
2. 2. JavaScript, THE Web Scripting Language
3. 3. The Document Object Model, a language-neutral set of interfaces
4. 4. The DOM and JavaScript - What is doing what?
   1. 4.1. Explanations

The Big Picture

Visual effects like moving layers around the page, showing and hiding layers, popup menus, etc, are often referred to as DHTML, or "Dynamic HTML". Some people question the real use of these technologies in web pages that are supposed to deal content and not presentation. But the fact is it is there, today.

JavaScript, THE Web Scripting Language

JavaScript is an "object scripting language" first developed at Netscape Communications Corp. by Brendan Eich, who is one of the leaders of the Mozilla project today. The JavaScript engine used by Mozilla is SpiderMonkey, which adheres to the ECMA-262 revision 3 specification. JavaScript is also known as ECMAScript.

Contrary to popular misconception, JavaScript is not "Interpretive Java". In a nutshell, JavaScript is a dynamic scripting language supporting prototype based object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. The great thing about JavaScript is that it is extremely easy to learn if you want to do basic programming (like the one required for simple DHTML). No visible variable types, strings so easy to use, total platform neutrality, etc. For advanced coders it also functions as both an object-oriented and a procedural language.

The Document Object Model, a language-neutral set of interfaces

While JavaScript is the programming language which will allow you to operate on the DOM objects and to manipulate them programmatically, the DOM will provide you with methods and properties to retrieve, modify, update, and delete parts of the document you are working on. For example, you may retrieve the value of an HTML text input control as a string using the DOM. You could then use the JavaScript "+" operator to concatenate that string with another one in order to make a meaningful sentence. You would then use the DOM "alert()" method to display the string in a dialog to the user. See also the examples below.

The DOM and JavaScript - What is doing what?

We arrive at the main point of this blog: What is doing what? In a script I embedded into my web page, what is the DOM, and what is the JavaScript? Let us look closer at a simple example. It will retrieve all the tags in a NodeList that we called "anchorTags". Then for each anchor tag (each element of the anchorTags NodeList), it will alert with the value of the "href" attribute of the tag.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
alert("Href of this a element is : " + anchorTags[i].href + "\n");
}

Explanations

This code snippet shows what is core JavaScript, and what is DOM.

var anchorTags =

This will create a JavaScript variable called "anchorTags".

document.getElementsByTagName("a")

The Document interface is the first interface defined in the DOM1 Core, and document is a host object implementing the Document interface. The document holds everything that is in your page.
The DOM1 Core defines the getElementsByTagName() method on the Document interface. It retrieves in a NodeList (a sort of DOM-specific array that holds nodes) of all the tags that match the parameter passed to the function, in order of appearance in the document source. The anchorTags variable is thus now a NodeList.

;

The basic end-of-instruction semicolon. JavaScript stuff.

for (var i = 0; i <

Typical "for" loop in a programming language. This will allow us to go through each node contained in the anchorTags NodeList. Note the declaration of the variable "i". Also JavaScript.

anchorTags.length

The DOM1 Core defines the length property of the NodeList interface. It returns an integer which is the number of nodes contained in the NodeList. Note that JavaScript arrays also have a length property.

; i++) {

Typical JavaScript variable by-1-increment.

alert(

alert() is a DOM method that pops up a dialog with the parameter (string) you passed to it. Note, that it's a part of what's called DOM level 0, or DOM0. DOM0 is a set of interfaces supported by some browsers, but which are not a part of any DOM specification.

"Href of this a element is : " +

A string literal and a string concatenation operator. JavaScript.

anchorTags[i].href

"href" is a property of the HTMLAnchorElement interface defined in the DOM1 HTML spec. It returns the value of href attribute of the anchor element, if any.
We also use anchorTags[i], the same syntax that's used in JavaScript to access i-th item of an array. The language-neutral "DOM way" to access an item of a NodeList is to use the item() method, defined on the NodeList interface: anchorTags.item(1).href. But most JavaScript implementations allow you use the simpler array-like syntax, and that's what most people actually use.

+ "\n");

More string concatenation. Insert an carriage return at the end of the string.

}

End of "for" loop.