DHTML by George Hernandez

Intro
Gecko
MS Internet Explorer
DHTML Object Tree

Intro

Laying down the skeleton of DHTML for W3C and the major browsers.

Before the W3C standardized DOM 1.0, browsers (MSIE 3 & NS 3) manipulated HTML and the browser itself via what was called DHTML (Dynamic HTML or DOM HTML). Since the W3C standardized DOM 1.0, 2.0, etc., each version of each browser supports subsets and supersets of different the versions of the W3C DOM. These proprietary browser DOMs that cover documents and the browser may still rightly called DHTML.

The most notable example of an object outside of the scope of the W3C DOM is the window object which contains an document object. The W3C starts at the document object but the DHTML DOM starts at the window object. The immediate members (properties, methods, objects, collections) of a window can be referenced without qualifying it. EG: window.alert('hi') could be done as alert('hi').

A page usually contains 1 document object. EG:
<html>
<head>...</head>
<body>...</body>
</html>
However, a page may contain 2+ documents. EG: Each frame object is points to a page that is a window object that contains 1 document object.
<html>
<head>...</head>
<frameset>
    <frame>...</frame>
    <frame>...</frame>
</frameste>
</body>
</html>

The window however has more than just the document. The window also has the "chrome" surrounding the document. Some chrome is found in most browser EG: The scroll bars, the menu bar and the status bar. Some chrome is browser specific. EG: The personal bar is only found in Gecko browsers.

Ideally every browser-like user agent would implement a superset of the W3C DOM. However, the W3C DOM is a work in progress, and each version of each browser supports subsets and supersets of different the versions of the W3C DOM. EGs:

For NN4 (Netscape Navigator 4), Netscape thought a layers object should be used, but W3C and Microsoft thought otherwise.
For NS6+ (Netscape 6), Netscape decided to get with the W3C program so they totally reworked the browser to be DOM 1 compliant, but at the cost of losing much backward compatibility with NN4.
Microsoft IE4+ (Internet Explorer 4+) is DOM 1 compliant (EG: document.getElementById(objID)) but IE also implements features that the W3C DOM and NS6 don't support (EG: document.all.objID).

Gecko

Gecko is the core of Netscape 6.1+ (NS6+), Mozilla, and Mozilla-based browsers. Henceforth I shall just say "Gecko DOM" instead of NS6/Mozilla/Gecko DOM.

Here are the Gecko DOM "data types" [Gecko]. It is a simplified version of the W3C node types.

document
- When a member returns an object of type document (e.g., the ownerDocument property of an element returns the document to which it belongs), this object is the root document object itself. The DOM Document Reference chapter describes the document object.
element
- element refers to an element or a node of type element returned by a member of the DOM API. Rather than saying, for example, that the document.createElement() method returns an object reference to a node, we just say that this method returns the element that has just been created in the DOM.
- element objects implement the DOM Element interface and also the more basic Node interface, both of which are included together in this reference.
nodeList
- A nodeList is an array of elements, like the kind that is returned by the method document.getElementsByTagName(). Items in a nodeList are accessed by index in either of two ways:
  - list.item(1)
  - list[1]
- These two are equivalent. In the first, item() is the single method on the nodeList object. The latter uses the typical array syntax to fetch the second item in the list.
attribute
- When an attribute is returned by a member (e.g., by the createAttribute() method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.
NamedNodeMap
- A namedNodeMap is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A NamedNodeMap has an item() method for this purpose, and you can also add and remove items from a NamedNodeMap

Here are the most commonly used interfaces in the Gecko DOM that are not part of the W3C DOM.

element.innerHTML. Returns a string for the raw HTML of the current elements and all its attributes, sub-elements, etc.
window._content.
window.onload.
window.dump().
window.scrollTo().

The Gecko DOM supports both of the following document structures whereas the IE DOM only supports the second structure:

document
- html
  - head
  - body
document
- documentElement
  - head
  - body

Gecko can remove some attributes that IE cannot. EG: The bgcolor attribute.

MS Internet Explorer

The IE DOM supports the following structure:

document
- documentElement
  - head
  - body

Almost any node in the DOM can be accessed with this syntax

document.getElementById("nodeName")

Microsoft's MSXML Parser is commonly used to manipulate the DOM. EG:

Set xmlDoc = CreateObject("MSXML.DOMDocument")
bSuccess = xmlDoc.load("hamburger.xml")
If bSuccess Then
   For Each node in xmlDoc.documentElement.childNodes
       val = node.text
   Next
End If

DHTML Object Tree

These trees represents the DHTML DOM objects and object collections.

The DHTML objects and object collections	The document object of the window object
window "Properties" of window that actually reference objects. self window parent top Objects of window. clientInformation clipboardData. MS only. crypto. Gecko only. directories. Gecko only. event external. MS only. history location locationBar. Gecko only. menuBar. Gecko only. navigator. The user's browser. plugins[] mimeTypes[] mimeTypes[] Package. JavaPackage object. personalbar. Gecko only. pkcs11. Gecko only. screen. The user's monitor. scrollbar. Gecko only. sidebar. Gecko only. statusbar. Gecko only. toolbar. Gecko only Collections of window. frames[]. *Has the usu. mix of MS collections: all[], attributes[], behaviourUrns[], chidlNodes[], and children[]. ^Has the usu. MS mix of style objects: currentStyle, runtimeStyle, and style. ~Has this mix of collections: attributes[], behaviorUrns[], filters[].	document. Objects of document. body^ filters[] timeAll[] timeChildren[] implementation location selection TextRange[] title all[]. MS only. anchors[] applets[]^ childNodes[] embeds[]^ forms[]^ elements[] button^ filters[]. MS only. input. Types include: button~^ checkbox~^ file~^ hidden attributes[] behaviorUrns[] image~^ password~^ radio~^ reset~^ submit~^ text.~^ select^ options[]^. No all[]. textArea^ filters[]. MS only. frames[]^. Has all the iframe and frame objects. The frameSet object is still available but not necessary. No currentStyle. images[]. Has the img objects. img^ filters[]. MS only. links[]. Has all the a objects. a^ namespaces[]. scripts[]* styleSheets[]. Each styleSheet object represents a link or style object. styleSheet imports[] pages[] page rules[] link* style behaviorUrns[]

DHTML methods are very similar to W3C DOM methods and can be confusing. EG:

var oParent1 = oNode.parentNode;    //W3C DOM
var oParent2 = oNode.parentElement; //DHTML DOM

Sometimes it is advantageous to do things via W3C DOM ways instead of DHTML ways and vice versa. EG:

var oPrevious1 = oNode1.previousSibling; //W3C DOM

//DHTML
var oPrevious2 = fnGetSibling();
function fnGetSibling(){
   var oParent2=oNode2.parentElement;
   var iLength=oParent2.children.length;
   for(var i=0;i < iLength;i++){
      if(oParent2.children[i]==oNode){
         return oParent2.children[i - 1];
         break;
      }
   }
}

oNode1.childNodes[0].nodeValue="Between tags 1"; //W3C DOM
oNode2.innerHTML="Between tags 2";               //DHTML

Some things are only possible with just W3C DOM and vice versa.

2007-08-17 21:17:33Z