Subject: Advanced Internet Technology

Topic: RIA and Mashup

Difficulty: Medium

Document Object Model (DOM)

• The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
• In the DOM specification, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.
• With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content.
• Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the internal subset and external subset have not yet been specified.

Node Tree for HTML document

• The backbone of an HTML document are tags. According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called “children” of the enclosing one. The text inside a tag it is an object as well.
• All these objects are accessible using JavaScript.

• The Document Object Model is a programming API for documents. The object model itself closely resembles the structure of the documents it models. For instance, consider this table, taken from an HTML document:

  < TABLE>
  <ROWS> 
  <TR> 
  <TD>Shady Grove</TD>
  <TD>Aeolian</TD> 
  </TR> 
  <TR>
  <TD>Over the River, Charlie</TD>
  <TD>Dorian</TD> 
  </TR> 
  </ROWS>
  </TABLE>
  

The Document Object Model represents this table like this:

Different levels of DOM

DOM Level 1

• The DOM Level 1 specification is separated into two parts: Core:- Core Level 1 provides a low-level set of fundamental interfaces that can represent any structured document, as well as defining extended interfaces for representing an XML document.

- HTML:- Level 1 provides additional, higher-level interfaces that are used with the fundamental interfaces defined in Core Level 1 to provide a more convenient view of an HTML document.

- DOM Level 2

The DOM Level 2 specification contains six different specifications:

1. The DOM2 Core extends the functionality of the DOM1 Core. It also contains specialized interfaces dedicated to XML.

2. The DOM2 Views allows programs and scripts to dynamically access and update the content of a representation of a document. The introduced interfaces are AbstractView and DocumentView.

3.The DOM2 Events gives a generic event system to programs and scripts. It introduces the concepts of event flow, capture, bubbling, and cancellation. Famous methods here include addEventListener and handleEvent. The DOM2 CSS, or

4.DOM2 Style, allows programs and scripts to dynamically access and update the content of style sheets. It has interfaces for Style Sheets, Cascading Style Sheets, CSSRule, CSSStyleDeclaration, the famous getComputedStyle

5. The DOM2 Traversal and Range allow programs and scripts to dynamically traverse and identify a range of content in a document. The DOM2 Traversal provides interfaces like NodeIterator and TreeWalker to easily traverse the content of a document. The DOM2 Range allows the creation, insertion, modification, and deletion of a range of content in a Document, DocumentFragment, or Attr. It can be characterized as selecting all of the content between a pair of boundary-points.

6.The DOM2 HTML allows programs and scripts to dynamically access and update the content and structure of HTML documents. It extends the interfaces defined in the DOM1 HTML, using the DOM2 Core possibilities.

DOM Level 3

• The DOM Level 3 specification contains five different specifications: The DOM3 Core, Load and Save, Validation, Events, and XPath.

1. The DOM3 Core will extend the functionality of the DOM1 and DOM2 Core specs. New methods and properties include adoptNode() and textContent, to name a couple.

2.The DOM3 Load and Save allows programs and scripts to dynamically load the content of an XML document into a DOM document, and serialize a DOM document into an XML document.

3. The DOM3 Validation allows programs and scripts to dynamically update the content and the structure of documents while ensuring that the document remains valid, or to ensure that the document becomes valid.

4. The DOM3 Events is the extension of the DOM2 Events specification. This specification mainly focuses on keyboard events and how to handle them.

5. The DOM3 XPath provides simple functionalities to access a DOM tree using XPath