JavaScript Tutorials - Herong's Tutorial Examples

∟W3C's Document Object Model (DOM) Specifications

∟Inheritance vs. Flattened Views of the API

This section provides two different views of DOM API: Flattened View - Everything is a node, and Inheritance View - A hierarchy of inherited interfaces.

The DOM API provides two different approaches to represent an XML/HTML document:

1."Objected Oriented" Approach - A document is represented by a collection of linked objects that have different interfaces with a hierarchy of inheritance. In other words, the entire DOM API can be viewed as a hierarchy of inherited interfaces. This is also called the "Inheritance View of DOM".

In this "Inheritance View of DOM", you need to lean a family of related interfaces:

interface Node
^
|- interface Document : Node
|  ^
|  |- interface HTMLDocument : Document
|
|- interface Element : Node
   ^
   |- interface  HTMLElement : Element
      ^
      |- interface HTMLHtmlElement : HTMLElement
      |- interface HTMLHeadElement : HTMLElement
      |- interface HTMLTitleElement : HTMLElement
      |- interface HTMLBodyElement : HTMLElement
      |- interface HTMLParagraphElement : HTMLElement
      |- interface HTMLFormElement : HTMLElement
      |- interface HTMLImageElement : HTMLElement
      ...

2. "Everything Is a Node" Approach - A document is represented by a tree of objects that have a single interface called "Node". In other words, the entire DOM API can be viewed as an single interface - the Node interface. This is also called the "Flattened View of DOM".

In this "Flattened View of DOM", you just need to learn one interface, "Node":

interface Node {
  readonly attribute DOMString        nodeName;
           attribute DOMString        nodeValue;
  readonly attribute unsigned short   nodeType;
  readonly attribute Node             parentNode;
  readonly attribute NodeList         childNodes;
  readonly attribute NamedNodeMap     attributes;
  readonly attribute Document         ownerDocument;
  Node               removeChild(in Node oldChild);
  Node               appendChild(in Node newChild);
  ...
};

Table of Contents

 About This JavaScript Tutorial Example Book

 Introduction to JavaScript

 ECMAScript Language Specification and JavaScript Dialects

 Data Types, Variables and Expressions

 Flow Control Statements

 Creating, Accessing, and Manipulating Arrays

 Defining and Calling Functions

 Web Browser Supporting JavaScript

 Server-Side and Client-Side Web Scripting

 Introduction to Objects

 Defining Your Own Object Types

 Inheritance of Properties and Methods through the Prototype Object Chain

 'jrunscript' - JavaScript Shell Command from JDK

 Using Functions as "Function" Objects

 Introduction to Built-in Object Types

►W3C's Document Object Model (DOM) Specifications

 Overview of DOM Specifications

 DOM Level 0 - Example

 DOM Level 1 - Example

 DOM Level 2 - Example

 DOM Level 3 - Example

 DOM Level Test - document.implementation.hasFeature

►Inheritance vs. Flattened Views of the API

 A Web Document as A Tree of Different Interfaces

 A Web Document as A Tree of Nodes

 Dump Document in a New Window - JavaScript Source

 Dump Document in a New Window - FireFox 2.0 Result

 Dump Document in a New Window - IE 6.0 Result

 References

 PDF Printing Version