Appendix A

DOM and  JavaScript

We arrive at the main point of this paper: 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 <a> 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.

Blue is for JavaScript, Red is for DOM.

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.                                                                                                                   (Guisset,2005, p. 3)