JavaScript Tutorials - Herong's Tutorial Examples - Version 2.21, by Dr. Herong Yang
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
ECMAScript Language Specification and JavaScript Dialects
Data Types, Variables and Expressions
Creating, Accessing, and Manipulating Arrays
Defining and Calling Functions
Web Browser Supporting JavaScript
Server-Side and Client-Side Web Scripting
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 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