Introduction to the HTML DOM

About this Document

  This document is Copyright (c) Information Technology Group,
  www.itgroup.ro, Alin Avasilcutei, Cornel Paslariu, Virgil Mager.

  Permission is granted to copy, distribute and/or modify this document
  under the terms of the GNU Free Documentation License, Version 1.2
  with no Invariant Sections, no Front-Cover Texts, no Back-Cover Texts.

This document is an introduction to the HTML DOM attempting to follow the specifications of existing standards at the time of writing.

As with any presentation which is not an exact reproduction, this document occasionally contains original interpretations of some of the notions it presents. The reader is urged to only use this document as a "Getting Started" tool, and not to rely exclusively upon its content for reference information on the HTML DOM.

The reader of this document is assumed familiar with the basic structure of HTML documents and the JavaScript language.

DOM Introduction

As it was described in Introduction to HTML, the 'Introduction' section, an HTML file contains a representation of a document using the specific syntax of the HTML language. By analyzing an HTML file, an HTML browser identifies individual HTML elements, some of them visible (e.g. an image or a button) and some of them not visible (e.g. an invisible table only used for graphically arranging the elements contained in its cells in a certain way), and eventually presents said elements into a document view.
No matter what individual elements an HTML document contains (e.g. images, buttons, text paragraphs, etc), all these elements are always aranged in a containment hireratcy, i.e. any element in an HTML document is contained in another element (except the invisible 'html' element which is always the top-level element of the containment hierarchy).
Given the above, the HTML Document Object Model, a.k.a. the HTML DOM, exhaustively specifies what type of elements, and in which order, can be contained inside another type of element.
Modern HTML standards allow an HTML document to include dynamic content, which means that various attributes and/or components of the document (e.g. the background color, the content of a paragraph, an image embedded in a document, etc) can change in response to various events, e.g. a button being "pressed", an image being clicked, a certain amount of time passed since a page was loaded, etc. The foundation mechanism that allows the HTML elements (contained in an HTML document) to change their appearance and/or behaviour and interact with one another relies on HTML 'script' elements which are individual programs, usually written in JavaScript, that are embedded in the HTML document as invisible elements. The exact way in which the various HTML elements contained in an HTML document can interact with one another (by means of script programs embedded in the HTML document) is also part of the HTML DOM specification.

Tag Names and IDs
Two essential characteristics of all HTML elements are the element Tag Name, and the Element ID property. An element's Tag Name essentially specifies the class of elements to which the respective element belongs (e.g. 'image', 'table', 'button', etc), while an element's ID is an optional property that uniquely identifies a given element instance within a document (i.e. there can be no two elements with the same ID in an HTML document). Both the Tag Name and the Element ID are heavily used by the various DOM methods for providing access to the HTML elements from scripts.

Browser Objects
The mechanism that provides HTML elements in a document with programmable behavior based on embedded scripts (e.g. clicking an image to cause the display of an alert box message) relies on the concept of 'browser object': a browser object is an object in the sense of Object Oriented Porgramming that is accessible from the scripts contained in an HTML document, and which serves as an interface between a script and the HTML elements contained in an HTML document: 
 =============                 
 HTML Document                 :
 =============                 :
      |                        :
      |contains                :
      |              script    :               contain
      +-----------> elements --:-------------------------------------------\
      |                        :                                           |
      |                        :                                           v
      v             describe   :      ===============                   =======
  non-script  -----------------:--->  Browser Objects                   Scripts 
   elements                    :      ===============                   =======
      |                        :            /  \                           |
      |have                    :           /have\                          |
      |                        :          /      \                         |
      v              reflect   :         v        v                        |
  Attributes  <----------------:--  Properties  Methods                    |
                               :         ^        ^                        |
                               :         |        |        can access      |
                               :         +--------+------------------------/
                               :
             HTML              :                      DOM
When the browser reads (interprets) an HTML document and identifies its comprising elements, for each element found in the HTML document the browser creates an internal 'browser object' that "mirrors" the corresponding HTML element: the various attributes of the HTML elements (e.g. the background color of a table, the checked/unchecked status of a checkbox, etc) and/or the various ways in which they may be changed will be "reflected" in the corresponding browser object as object properties and/or object methods. In this way, a script embedded in the HTML document will be able to both read and modify an HTML element's appearence and/or behavior by accessing its corresponding browser object's properties and/or methods.

The rest of this document presents, one by one, the most commonly used types of browser objects, describing how accessing the browser objects' attributes and methods from a script influences their corresponding HTML elements' appearence and/or behavior.


Window Object

The 'window' object is the "parent" object of all the browser objects in the HTML DOM containment hierarchy. This means that all other browser objects are its child objects. All child objects are said to be properties of their parent object. Some of the child objects like the 'document' object are also parent or container objects for other objects that are lower down in the browser object containment hierarchy.
The 'window' object is said to be the top-level object for each 'document', 'location', and 'history' objects; it has object references associated with it as properties ('navigator', 'screen', 'location', 'history' and 'document' objects).
For each HTML document loaded in a browser client or an 'window.open()' method call, an 'window' object is created.



Document Object

The following section describes the properties and methods associated with the browser object 'document'. As it was previously described in the 'DOM introduction' section, the 'document' object is itself accessible form a script as a property of the 'window' object (i.e. 'window.document').


Element Object

The term 'Element object' in this document will be used as a synonym of 'browser object type', i.e. for each type of HTML element the DOM defines a corresponding 'element object' (e.g the element object 'image' is an OOP data type that reflects, via its associated properties and methods, the attributes and functionality of the HTML element type 'image'). Thus, for each HTML element in a document, an instance of an element object (i.e. a brwoser object) is accessible from a script.

This chapter contains three sections: element object properties, element object methods, and list of element objects. The first chapter lists and explains the properties that are common to (almost) all element objects, the next chapter lists and explains the methods that are common to (almost) all element objects, and the third chapter presents the list of (the most frequently used) element objects together with that properties and methods that are applicable to each of them.

Dynamic Attributes


Dynamic Event Handlers

Apart from the possibility of attaching an event handler to an HTML element directly in the HTML source code (i.e. a "statical" attachment as described in the Intorduction to JavaScript, the Event Handlers section), one can also dynamically change the event listener attached to any broswer object from JavaScript, with the event listener name being the name of the event they handle preceded by "on" (just like the event listeners embedded as HTML elements attributes), e.g. onclick, onload, onblur, etc. As with the event listeners that are "statically" attached to HTML elements in the HTML code, not all browser objects support the same set of event handlers (e.g. 'onload' is supported only by 'document' and 'frameset', 'onabort' is supported only by 'image', etc).

Dialog boxes

The 'window' object provided by the typical JavaScript run-time environment implements a number of methods that can be used to display several simple pop-up dialog boxes.
See the 'Window Object' chapter, the 'dialog boxes' paragraph for details.


Text selection

Modern browsers have a varying degree of support for handling selections, and the exact mechanism differs widely. Moreover, these mechanisms are in an early stage of definition at the time of writing this document, and they are very likely to change rapidly between different browser versions. If handling text selections is indispensable in an application, it is highly recommended to not use browser-specific inline code, and opt for using (or writing) a separate, easily updatable cross-browser function instead.

The following methods can be used for getting the selected text (or an empty string if no text is selected) for MSIE 6,7,8 and Firefox 2,3: Note that Firefox does not return selected text inside textarea input boxes, while MSIE does.


Timer Functions

The 'window' object provided by the typical JavaScript run-time environment implements a "hidden clock" which can be used for scheduling code execution based on time delays and periodic intervals.
See the 'Window Object' chapter, the 'timer methods' paragraph for details.


Cookies

Cookies are a mecanism that allows a JavaScript program embedded inside an HTML document to save, and later read, a persistent string value: the characteristic of this persistent string value is that it is saved on the computer's non-volatile memory (e.g. hard drive), and it can persist between successive browsing sessions (i.e. after the broswer has been closed and then restarted) and even between computer sessions (i.e. after the computer has been shut down and then restarted).

The mechanism of implementing cookies is based on the read/write 'cookie' propetry of the 'document' object: document.cookie . This property behaves differently from a usual object property in that the values that are written to it, internally stored by it, and then read from it, are all different from each other (i.e. the value read from this property is not necessarily the last value that has been written to it). Also, unless explicitly programmed otherwise, a cookie that is written by a document's JavaScript is not necessarily accessible from another document, and it may not be accessible even from the document that wrote the cookie if the document's URL (i.e. its name and/or location) changes. However, a cookie written by a document's JavaScript is accessible by that same document if the document's URL (i.e. its name name and location) are not changed.

The following paragraphs detail the behavior of the 'document.cookie' property and, unless explicitly specified otherwise, it is assumed that the document's URL is not changed.


AJAX

AJAX (Asynchronous JavaScript And XHTML) is an acronym that designates a collection of technologies that allow a "more dynamic" presentation of web pages. The foundation of the AJAX technologies comprizes the facilities offered by the JavaScript/DOM model, together with a special-purpose browser object type called 'XMLHttpRequest'. In brief, an XMLHttpRequest object allows a JavaScript program to request an HTML document (actually, the preferred format is the generic XML, but any text-based format is acceptable) from a web server (i.e. an http: protocol-based server), and then process the received document without displaying it as-is in the browser. In this way, although a new document has been retreived from a web server, the web page displayed in the browser can remain unchanged, or it can be changed only partially based on the contents of the document that has been retreived. The mechanism by which a JavaScript program can use AJAX to retrieve, and then process, a data file from a server has a setup stage consisteing of the following steps:
  1. a new instance of an XMLHttpRequest object needs to be created, e.g. myXMLHttpRequestObject
  2. a function has to be written that will process the document that will be received, e.g. myProcessingFunction()
  3. the dedicated XMLHttpRequest event handler 'onreadystatechange' of myXMLHttpRequestObject object has to be assigned with the function that will process the document that is retreived
  4. the "fetch document" command must be issued, specifying the document's URL
Performing this setup stage is similar to scheduling a function with one of the timer methods (e.g. setTimeout(), etc), but instead of starting the scheduled method at a certain time it will be started when the XMLHttpRequest object completes fethching the requested document. After the setup stage (as detailed above) has been performed, the XMLHttpRequest object starts its attempt to fetch the specified document, and it will either succeed or fail; in any case, the dedicated 'readyState' attribute of the XMLHttpRequest object will eventually change to '4' meaning 'operation completed' (may it be successful completion of the request, or a failure), and this will trigger the 'onreadystatechange' event handler (thus invoking the user defined method that has been "attached" to it). The status of the request will then be reflected in a dedicated 'status' property of the XMLHttpRequest object, which can be checked against the most common conditions: If the 'status' is not 200 (i.e. "OK") when the 'readyState' attribute is 4 (i.e. "completed"), then an error occurred and corresponding actions may be taken; if the status is OK, then the XMLHttpRequest object will make the received document available to JavaScript via two properties: 'responseText' and 'responseXML'. The following example details all the necessary code required to perform a simple asynchronous AJAX-based request: it fetches the 'index.html' file from the directory in which it resides and displays it in an alert box: 
<html>
   <head>
      <script>
      var receiver = new XMLHttpRequest();

      function whenDocReceived() {
         if (receiver.readyState != 4) return; // reception not ready yet
         alert(receiver.responseText);         // display the received document
      }

      function scheduleReception(docURL) {
         receiver.onreadystatechange = whenDocReceived;
         receiver.open("GET", docURL, true);   // specify the doc to receive
         receiver.send(null);                  // start reception attempt
      }
      </script>
   </head>

   <body>
      <input type='button'
             value='show "index.html" listing'
             onClick='scheduleReception("index.html")'/>
   </body>
</html>


Response Caching
A common problem that may occur with documents that are received via XMLHttpRequest is related to the way in which a particular browser caches said response; specifically, while a "regular" document that is loaded by a web browser can be forced to reload from the server (and thus refresh the browser cache) by using the broswer's 'reload' function (the reload/refresh button), the documents that are received via XMLHttpRequest are not necessarily refreshed, i.e. the cached version might still be used instead of the newest version from the server (this behavior depends on the browser). In order to force a document to actually be reloaded when it is received via XMLHttpRequest, two special properties "Cache-control" and "Pragma" in the AJAX request header can be set to the value "no-cache".

The code snippet below is a re-write of the "scheduleReception()" function in the example above such that the "no-cache" properties are set in the XMLHttpRequest header:
// instruct the browser to NOT use caching for AJAX document load
function scheduleReception(docURL) {
   receiver.onreadystatechange = whenDocReceived;
   receiver.setRequestHeader("Cache-Control", "no-cache"); // request cache refresh/bypass via "Cache-Control"
   receiver.setRequestHeader("Pragma", "no-cache");        // request cache refresh/bypass via "Pragma"
   receiver.open("GET", docURL, true);   // specify the doc to receive
   receiver.send(null);                  // start reception attempt
}


HTML 5
<TODO>