DOM

Document

Object

Model

Document Is The Application

• With the introduction of client-side event-handling scripting languages such as JavaScript, the nature of documents changed from passive to active.

• The documents themselves became "live" applications.

Document Is The User-Interface• If documents are becoming applications, we need to

manage a set of user-interactions with a body of information.

• The document thus becomes a user-interface to information that can change the information and the interface itself.

• HTML itself is a static data format; How the browser renders the various elements of an HTML page is a behavior that is pre-defined.

• We can change these behaviors to create and control new kinds of behaviors by defining them in scripts (for example, using JavaScript) or as formatting properties using cascading style sheets (CSS).

Document Is The Data• eXtensible Markup Language (XML) is

increasingly being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would be seen as data rather than as documents.

• Nevertheless, XML presents this data as a document.

The Chaos• HTML 4.0, has a standard way to embed

scripts and styles in documents. • This has allow dynamically access and

update of content, structure, and style.• Dynamic HTML" are not only proprietary but

also incompatible among the browsers.• As a result, in the absence of a standard

interface, programs will not work without changes across browsers.

An Order : The DOM• An document object model is a framework

that organizes how elements are referenced and how they interact with each other.

For example

• How scripts reference elements of a document.

• How styles are applied to elements.• How scripts change styles.

The Evolution : Levels Of The DOM• Level 0. Defined to be the functionality equivalent to

NS 3.0 and IE 3.0. Current DOM (Level 1) builds on this technology.

• Level 1. This is an effort to make sure that both browsers (in Level 0) will share a common DOM.

1. It concentrates on the actual core, HTML, and XML document models.

2. It contains functionality for navigation around an HTML or XML document, and manipulation of the content in that document.

3. Although this level was strongly influenced by "Dynamic HTML", it does not implement all of it. In particular, events have not yet been defined.

Document Is The Collection Of Objects

• A document is an ordered collection of elements. – An element is an object that contains all the

content between the start and end tags of the element as objects, and any set of attributes that are defined for the element.

• How can the scripts identify an element?– Each element can be assigned a name (its tag

name). – For example, we can assign the H2 element an ID

attribute that uniquely identifies it:

What Is The DOM?

• The Document Object Model is a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents.

DOM As An Object Model• Documents are modeled using objects.• Model encompasses the structure as

well as the behavior of the document objects.

• As an object model, the DOM identifies: – The interfaces and objects used to

represent and manipulate a document. – The semantics of these interfaces and

objects, including behavior and attributes. – The relationships and collaborations

among these interfaces and objects.

Advantages Of The DOM• Language and Implementation-Neutral Interface. An

important feature of the DOM is to provide a standard programming interface that can be used in a wide variety of environments and applications. 

• Interoperability. A benefit of having a standard API is interoperability which is a necessity for documents sent over the Internet.

• HTML and XML Support. The DOM is designed with both HTML and XML in mind. There is a core functionality that works with XML and HTML, and an extra functionality that works with HTML documents.

• Style Sheets Support. The DOM specifies a way to manipulate and change CSS style sheets. In the future, there will be core functionality that may be applicable to other style sheet languages such as eXtensible Stylesheet Language (XSL).

DOM As A Structure ModelDOM Table

<TABLE><TBODY><TR><TD>a11</TD><TD>a12</TD></TR><TR><TD>a21</TD><TD>a22</TD></TR></TBODY></TABLE>

DOM Table

Node Objects• Each node of the document tree may

have any number of child nodes. A child will always have an ancestor and can have siblings or descendants. All nodes, except the root node, will have a parent node. A leaf node has no children. Each node is ordered (enumerated) and can be named.

DOM establishes two basic types of relationships

1.Navigation The ability to traverse the node hierarchy, and

2.ReferenceThe ability to access a collection of nodes by

name.

NAVIGATIONThe structure of the document determines the inheritance of element attributes. Thus, it is important to be able to navigate among the node objects representing parent and child elements. Given a node, you can find out where it is located in the document structure model and you can refer to the parent, child as well as siblings of this node. This might be done using the NodeList object, which represents an ordered collection of  nodes.

REFERENCE• If a gallery page is filled with individual images. Then,

the image itself is a class, and each instance of that class can be referenced.

• A unique name or ID can be assigned to each image using the NAME OR ID attribute.

• It is possible to create an index of image names or ID’s by iterating over a list of nodes.

• A script can use this relationship to reference a image by an absolute or relative position and to insert or remove an image.

• This might be done using the NamedNodeMap object, which represents (unordered) collection of  nodes that can be accessed by name.

Conclusion• The DOM is a model in which the

document contains objects.

• Each object has properties and methods associated with it that can be accessed by a scripting language for manipulation.

• DOM is the "Dynamic" of Dynamic HTML

Now And The Future• The DOM is a platform- and language-neutral interface

that will allow programs and scripts to dynamically access and update the content, structure and style of documents in a standard way. Viable cross-platform implementations of this interface are yet to be seen.

• The DOM Level 1 was completed in October 1998. • Work on Level 2 has started.

– Level 2 is being planned to include a style sheet object model.– Define functionality for manipulating the style information attached

to a document. – It will allow manipulation of the CSS styles attached to an HTML

or XML document. – It will also include an event model which Level 1 doesn’t.