Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-22T22:33:54Z

Champion: /* What is DOM */

Document Object Model 

==Introduction==

Browser [http://en.wikipedia.org/wiki/Scripting_language Scripting Languages] are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information presented in [http://en.wikipedia.org/wiki/XML XML] and [http://en.wikipedia.org/wiki/Html HTML] documents is in a structured format. The technique used to access these documents is called Document Object Model (DOM). DOM is platform language independent interface that allows to create and modify the content, structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are an encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods.

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification[5], the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of [http://en.wikipedia.org/wiki/Dynamic_HTML Dynamic HTML], which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript:[6] In December 1995, LiveScript was renamed [http://en.wikipedia.org/wiki/JavaScript JavaScript] and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript:[7] Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, [http://www.ecma-international.org/publications/standards/Ecma-262.htm ECMA-262], began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client:[3] The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server:[3] Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the [http://xerces.apache.org/xerces-c/ Xerces]parser from Apache Foundation.
* HTML and XML:[1] In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004,[5] Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as [http://en.wikipedia.org/wiki/E4X E4X] (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

'''DOM Core''' : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

'''DOM HTML''' : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functions provided include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes[8]:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element[3],
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property[3],:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in displaying the same chunk of information across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C implementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML HTTP requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline characters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==DOM and SAX==
[http://en.wikipedia.org/wiki/Simple_API_for_XML SAX] provides a mechanism for reading data from an XML document.
SAX is a popular alternative to the DOM. However, SAX is not the right tool for this job. Following table differentiates between SAX and DOM.

'''SAX is sequential'''

SAX does not allow random access to XML document. Only the current element is accessible. Suppose, if the second element is being accessed, then it cannot access information from fourth element because the fourth element hasn't been parsed yet. Also, when the fourth element is getting accessed, it cannot "look back" on the second element.

'''Comparing DOM and SAX'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! DOM
! SAX
|-
| Before processing, stores the entire XML document in memory
| Sequential and parses node by node
|-
| Occupies more memory
| Doesn't store the XML in memory
|-
| We can insert or delete nodes
| We can't insert or delete a node
|-
| Traverse in any direction
| Top to bottom traversing
|-
| Accessing siblings can be done using predefined functions
| Accessing siblings is difficult due to sequential nature
|}

==Conclusion==

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. It allows the programmer create and modify HTML pages and XML documents as full-fledged program objects
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new
DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience. XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.

==References==

# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.
# Jeremy Keith (2005), ''DOM scripting: Web Design with JavaScript and the Document Object Model'', ISBN: 1-59059-533-5.
# Joe Marini (2002), ''The Document Object Model: Processing Structured Documents'', ISBN: 0-07-222436-3.
# [http://www.w3.org/DOM/ Document Object Model (DOM)]
# Philippe Le Hégaret, [http://www.w3.org/2002/07/26-dom-article.html The W3C Document Object Model]
# Stephen Chapman, [http://javascript.about.com/od/reference/a/history.htm A Brief History of Javascript]
# [http://en.wikipedia.org/wiki/ECMAScript ECMAScript]
# [https://developer.mozilla.org/En/DOM/Node.attributes Node Attributes]
# [https://developer.mozilla.org/en/the_dom_and_javascript The DOM and JavaScript]

==Further Reading==
# [http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096 Document Object Model Core]
# [http://dev.w3.org/2006/webapi/DOM4Core/DOM4Core.html DOM Level 4]
# [http://www.ecma-international.org/publications/standards/Stnindex.htm ECMAScript Language Specification ]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-22T22:27:14Z

Champion: /* Conclusion */

Document Object Model 

==Introduction==

Browser [http://en.wikipedia.org/wiki/Scripting_language Scripting Languages] are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in [http://en.wikipedia.org/wiki/XML XML] and [http://en.wikipedia.org/wiki/Html HTML] documents is in a structured format. The technique used to access these document is called Document Object Model (DOM). DOM is platform language independent interface that allows to create and modify the content, structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification[5], the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of [http://en.wikipedia.org/wiki/Dynamic_HTML Dynamic HTML], which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript:[6] In December 1995, LiveScript was renamed [http://en.wikipedia.org/wiki/JavaScript JavaScript] and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript:[7] Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, [http://www.ecma-international.org/publications/standards/Ecma-262.htm ECMA-262], began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client:[3] The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server:[3] Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the [http://xerces.apache.org/xerces-c/ Xerces]parser from Apache Foundation.
* HTML and XML:[1] In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004,[5] Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as [http://en.wikipedia.org/wiki/E4X E4X] (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

'''DOM Core''' : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

'''DOM HTML''' : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functions provided include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes[8]:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element[3],
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property[3],:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in displaying the same chunk of information across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C implementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML HTTP requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline characters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==DOM and SAX==
[http://en.wikipedia.org/wiki/Simple_API_for_XML SAX] provides a mechanism for reading data from an XML document.
SAX is a popular alternative to the DOM. However, SAX is not the right tool for this job. Following table differentiates between SAX and DOM.

'''SAX is sequential'''

SAX does not allow random access to XML document. Only the current element is accessible. Suppose, if the second element is being accessed, then it cannot access information from fourth element because the fourth element hasn't been parsed yet. Also, when the fourth element is getting accessed, it cannot "look back" on the second element.

'''Comparing DOM and SAX'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! DOM
! SAX
|-
| Before processing, stores the entire XML document in memory
| Sequential and parses node by node
|-
| Occupies more memory
| Doesn't store the XML in memory
|-
| We can insert or delete nodes
| We can't insert or delete a node
|-
| Traverse in any direction
| Top to bottom traversing
|-
| Accessing siblings can be done using predefined functions
| Accessing siblings is difficult due to sequential nature
|}

==Conclusion==

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. It allows the programmer create and modify HTML pages and XML documents as full-fledged program objects
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new
DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience. XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.

==References==

# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.
# Jeremy Keith (2005), ''DOM scripting: Web Design with JavaScript and the Document Object Model'', ISBN: 1-59059-533-5.
# Joe Marini (2002), ''The Document Object Model: Processing Structured Documents'', ISBN: 0-07-222436-3.
# [http://www.w3.org/DOM/ Document Object Model (DOM)]
# Philippe Le Hégaret, [http://www.w3.org/2002/07/26-dom-article.html The W3C Document Object Model]
# Stephen Chapman, [http://javascript.about.com/od/reference/a/history.htm A Brief History of Javascript]
# [http://en.wikipedia.org/wiki/ECMAScript ECMAScript]
# [https://developer.mozilla.org/En/DOM/Node.attributes Node Attributes]
# [https://developer.mozilla.org/en/the_dom_and_javascript The DOM and JavaScript]

==Further Reading==
# [http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096 Document Object Model Core]
# [http://dev.w3.org/2006/webapi/DOM4Core/DOM4Core.html DOM Level 4]
# [http://www.ecma-international.org/publications/standards/Stnindex.htm ECMAScript Language Specification ]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-22T17:26:23Z

Champion: /* What is DOM */

Document Object Model 

==Introduction==

Browser [http://en.wikipedia.org/wiki/Scripting_language Scripting Languages] are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in [http://en.wikipedia.org/wiki/XML XML] and [http://en.wikipedia.org/wiki/Html HTML] documents is in a structured format. The technique used to access these document is called Document Object Model (DOM). DOM is platform language independent interface that allows to create and modify the content, structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification[5], the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of [http://en.wikipedia.org/wiki/Dynamic_HTML Dynamic HTML], which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript:[6] In December 1995, LiveScript was renamed [http://en.wikipedia.org/wiki/JavaScript JavaScript] and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript:[7] Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, [http://www.ecma-international.org/publications/standards/Ecma-262.htm ECMA-262], began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client:[3] The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server:[3] Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the [http://xerces.apache.org/xerces-c/ Xerces]parser from Apache Foundation.
* HTML and XML:[1] In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004,[5] Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as [http://en.wikipedia.org/wiki/E4X E4X] (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

'''DOM Core''' : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

'''DOM HTML''' : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functions provided include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes[8]:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element[3],
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property[3],:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in displaying the same chunk of information across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C implementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML HTTP requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline characters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==DOM and SAX==
[http://en.wikipedia.org/wiki/Simple_API_for_XML SAX] provides a mechanism for reading data from an XML document.
SAX is a popular alternative to the DOM. However, SAX is not the right tool for this job. Following table differentiates between SAX and DOM.

'''SAX is sequential'''

SAX does not allow random access to XML document. Only the current element is accessible. Suppose, if the second element is being accessed, then it cannot access information from fourth element because the fourth element hasn't been parsed yet. Also, when the fourth element is getting accessed, it cannot "look back" on the second element.

'''Comparing DOM and SAX'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! DOM
! SAX
|-
| Before processing, stores the entire XML document in memory
| Sequential and parses node by node
|-
| Occupies more memory
| Doesn't store the XML in memory
|-
| We can insert or delete nodes
| We can't insert or delete a node
|-
| Traverse in any direction
| Top to bottom traversing
|-
| Accessing siblings can be done using predefined functions
| Accessing siblings is difficult due to sequential nature
|}

==Conclusion==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==References==

# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.
# Jeremy Keith (2005), ''DOM scripting: Web Design with JavaScript and the Document Object Model'', ISBN: 1-59059-533-5.
# Joe Marini (2002), ''The Document Object Model: Processing Structured Documents'', ISBN: 0-07-222436-3.
# [http://www.w3.org/DOM/ Document Object Model (DOM)]
# Philippe Le Hégaret, [http://www.w3.org/2002/07/26-dom-article.html The W3C Document Object Model]
# Stephen Chapman, [http://javascript.about.com/od/reference/a/history.htm A Brief History of Javascript]
# [http://en.wikipedia.org/wiki/ECMAScript ECMAScript]
# [https://developer.mozilla.org/En/DOM/Node.attributes Node Attributes]
# [https://developer.mozilla.org/en/the_dom_and_javascript The DOM and JavaScript]

==Further Reading==
# [http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096 Document Object Model Core]
# [http://dev.w3.org/2006/webapi/DOM4Core/DOM4Core.html DOM Level 4]
# [http://www.ecma-international.org/publications/standards/Stnindex.htm ECMAScript Language Specification ]

File:Domdiff.jpg

2010-11-17T23:32:02Z

Champion:

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T23:30:17Z

Champion: /* DOM and SAX */

Document Object Model 

==Introduction==

Browser [http://en.wikipedia.org/wiki/Scripting_language Scripting Languages] are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in [http://en.wikipedia.org/wiki/XML XML] and [http://en.wikipedia.org/wiki/Html HTML] documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification[5], the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of [http://en.wikipedia.org/wiki/Dynamic_HTML Dynamic HTML], which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript:[6] In December 1995, LiveScript was renamed [http://en.wikipedia.org/wiki/JavaScript JavaScript] and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript:[7] Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, [http://www.ecma-international.org/publications/standards/Ecma-262.htm ECMA-262], began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client:[3] The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server:[3] Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the [http://xerces.apache.org/xerces-c/ Xerces]parser from Apache Foundation.
* HTML and XML:[1] In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004,[5] Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as [http://en.wikipedia.org/wiki/E4X E4X] (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

'''DOM Core''' : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

'''DOM HTML''' : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functions provided include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes[8]:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element[3],
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property[3],:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in displaying the same chunk of information across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C implementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML HTTP requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline characters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==DOM and SAX==
[http://en.wikipedia.org/wiki/Simple_API_for_XML SAX] provides a mechanism for reading data from an XML document.
SAX is a popular alternative to the DOM. However, SAX is not the right tool for this job. Following table differentiates between SAX and DOM.

'''SAX is sequential'''

SAX does not allow random access to XML document. Only the current element is accessible. Suppose, if the second element is being accessed, then it cannot access information from fourth element because the fourth element hasn't been parsed yet. Also, when the fourth element is getting accessed, it cannot "look back" on the second element.

<center>
[[Image:domdiff.jpg]]
</center>

==Conclusion==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==References==

# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.
# Jeremy Keith (2005), ''DOM scripting: Web Design with JavaScript and the Document Object Model'', ISBN: 1-59059-533-5.
# Joe Marini (2002), ''The Document Object Model: Processing Structured Documents'', ISBN: 0-07-222436-3.
# [http://www.w3.org/DOM/ Document Object Model (DOM)]
# Philippe Le Hégaret, [http://www.w3.org/2002/07/26-dom-article.html The W3C Document Object Model]
# Stephen Chapman, [http://javascript.about.com/od/reference/a/history.htm A Brief History of Javascript]
# [http://en.wikipedia.org/wiki/ECMAScript ECMAScript]
# [https://developer.mozilla.org/En/DOM/Node.attributes Node Attributes]
# [https://developer.mozilla.org/en/the_dom_and_javascript The DOM and JavaScript]

==Further Reading==
# [http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096 Document Object Model Core]
# [http://dev.w3.org/2006/webapi/DOM4Core/DOM4Core.html DOM Level 4]
# [http://www.ecma-international.org/publications/standards/Stnindex.htm ECMAScript Language Specification ]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T22:37:25Z

Champion: /* Browser Support */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification[5], the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript:[6] In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functions provided include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

<https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element,
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property,:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in displaying the same chunk of information across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C implementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML HTTP requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline characters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==Conclusion==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.
# Jeremy Keith (2005), ''DOM scripting: Web Design with JavaScript and the Document Object Model'', ISBN: 1-59059-533-5.
# Joe Marini (2002), ''The Document Object Model: Processing Structured Documents'', ISBN: 0-07-222436-3.
# [http://www.w3.org/DOM/ Document Object Model (DOM)]
# Philippe Le Hégaret, [http://www.w3.org/2002/07/26-dom-article.html The W3C Document Object Model]
# Stephen Chapman, [http://javascript.about.com/od/reference/a/history.htm A Brief History of Javascript]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T22:36:23Z

Champion: /* Levels of DOM */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification[5], the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript:[6] In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functions provided include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

<https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element,
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property,:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==Conclusion==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.
# Jeremy Keith (2005), ''DOM scripting: Web Design with JavaScript and the Document Object Model'', ISBN: 1-59059-533-5.
# Joe Marini (2002), ''The Document Object Model: Processing Structured Documents'', ISBN: 0-07-222436-3.
# [http://www.w3.org/DOM/ Document Object Model (DOM)]
# Philippe Le Hégaret, [http://www.w3.org/2002/07/26-dom-article.html The W3C Document Object Model]
# Stephen Chapman, [http://javascript.about.com/od/reference/a/history.htm A Brief History of Javascript]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T22:35:31Z

Champion: /* History */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification[5], the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript:[6] In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

<https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element,
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property,:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==Conclusion==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/
# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.
# Jeremy Keith (2005), ''DOM scripting: Web Design with JavaScript and the Document Object Model'', ISBN: 1-59059-533-5.
# Joe Marini (2002), ''The Document Object Model: Processing Structured Documents'', ISBN: 0-07-222436-3.
# [http://www.w3.org/DOM/ Document Object Model (DOM)]
# Philippe Le Hégaret, [http://www.w3.org/2002/07/26-dom-article.html The W3C Document Object Model]
# Stephen Chapman, [http://javascript.about.com/od/reference/a/history.htm A Brief History of Javascript]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T22:35:06Z

Champion: /* Introduction */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describe any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logical relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

<https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element,
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property,:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==Conclusion==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/
# Jeffrey Sambells, Aaron Gustafson (2007), ''Advanced DOM scripting: Dynamic Web Design Techniques'', ISBN: 1-59059-856-3.

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T22:18:44Z

Champion:

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

'''Node name, values, types'''
The above table gives a brief idea about different types of node names, their values and a short description about nodes.

'''Node parents, children, siblings'''

To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNodes which references a NodeList of DOM objects (like an array).
*parentNode: references a single direct parent of the specific node.
*childNodes: references all child elements of a node.
*firstChild: references first child in child nodes.
*lastChild: references last child in child nodes.
*previousSiblings: Represents sibling node immediately before the selected node.
*nextSiblings: Represents sibling node immediately after the selected node.

'''Node Attributes'''

<https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.

Accessing Node Attributes:
x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

'''Node OwnerDocument Property'''

This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
*getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
*setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
*removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
*getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
*setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
*removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
*The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements,attributes, Text nodes, comments.

The document.documentElement property is a shortcut to the root element of the document.

Creating nodes with document methods
*createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
*createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
*crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
*createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
*The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.
*The getElementsByTagName('TAG') method: Returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.
*The importNode() method: Imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
The diagram below shows DOM representation of a HTML page. The examples below are some of the ways in which elements can be accessed/modified using DOM.
<center>
[[Image:domExample2.jpg]]
</center>

To list all the nodes that are children of the body element,
ADS.addEvent(window, 'load', function() {
ADS.log.header('List child nodes of the document body')
for( var i=0 ; i< document..body.childNodes.length ; i++) {
ADS.log.write(document.body.childNodes.item(i).nodeName);
}
});

To elements of 'ListItem' can be accessed using anchor's attributes property,:
ADS.addEvent(window, 'load', function() {
ADS.log.header('Attributes')
var anchor = document.getElementById('ListItem');
for( var i=0 ; i< anchor.attributes.length; i++) {
ADS.log.write(anchor.attributes.item(i) + '=' + anchor.attributes.item(i).nodeValue);
}
});

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==Conclusion==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.
DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T21:28:07Z

Champion: /* Applications */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

When the initial version of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evolution of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for navigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not tied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this are the various parsing libraries
which can be included int your application for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==Future DOM==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.

==Conclusion==

DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T21:27:51Z

Champion: /* Example DOM */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.

==Conclusion==

DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T21:26:53Z

Champion: /* Example DOM */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

[[Image:domExample.jpg]]

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in Figure 1 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

====Core Node Object====
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure 1 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style=" margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
! nodeName
! nodeValue
! attributes
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure 1, <BODY> node is an element type
| Tag name
| null
| NamedNodeMap
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
| Attribute name
| Attribute value
| null
|-
| Text
| Represents the textual content of an element. In Figure 1, the node has text child node which represents the text "Bold Text"
| #text
| Comment text
| null
|-
| CDATA Selection
| Represents a Character Data selection in an XML document
| #cdata-section
| CDATASection content
| null
|-
| Comment
| Represents a comment. Comments are of the form 
| #comment
| Comment text
| null
|-
| Document
| Represents the root node of a document
| #document
| null
| null
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
| Name of document type
| null
| null
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
| #document-fragment
| null
| null
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
| Target name
| Content excluding the target
| null
|-
| Entity
| Represents an entity in XML document
| Entity name
| null
| null
|-
| EntityReference
| Represents an entity reference in the document
| Name of referenced entity
| null
| null
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
| Notation name
| null
| null
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

====Core Element Object====
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

====Core Document Object====
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>

When the intitial versio of DOM specifications were drafted the focus was on the supporting web browsers efficiently.
However, the evotion of the Web and the widespread use of XML has forced the use of DOM in other application as well.
For example every application stores some amount of data on either the server or client side when it runs on the internet.
This information is stored in a structured format and DOM techniques can be used for naigating through these objects. As a result,
DOM finds wide applications in client-server type of business setups.

Standalone DOM implementations are not ied to larger applications such as web browsers. Instead they are provided as libraries which
your applications can use for extracting data from the structured information. Example of this sre the various parsing libraries
which can be included int your appliation for customized parsing of documents. On the other hand, Embedded DOM implementations are tied
to larger applications. In these type f applications, DOM is exposed to extensions, such as Macromedia’s Dreamweaver HTML
authoring applications.

==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.

==Conclusion==

DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T21:03:58Z

Champion: /* Conclusion */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

<HTML>
<HEAD>
<TITLE> This document is used as DOM example. </TITLE>
<BODY>
Bold text.
Italicized text.
</BODY>
</HTML>

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.

==Conclusion==

DOM is changing the way we browse web pages everyday. As newer version of DOM are drafted to support the modern web standards, it provides better interactivity with web pages. DOM4 promises for developing richer, standardized applications. Also with the advent of new DOM features, the browsers will also see a change in the implementation as well as operation giving the end users a better browsing experience.

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T20:54:00Z

Champion: /* Future DOM */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
Following example shows a simple HTML page and corresponding DOM.

<HTML>
<HEAD>
<TITLE> This document is used as DOM example. </TITLE>
<BODY>
Bold text.
Italicized text.
</BODY>
</HTML>

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==

XSLT Support has been provided in the latest version of DOM drafted. the initial draft of DOM level 4 was finalized in 2009. DOM4 build on DOM Core Level 3 and also incorporates features from DOM Leve2 HTML.

==Conclusion==

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T20:49:16Z

Champion: /* Level 3 */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.

It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types. Another feature of Level3 DOM is error handling interfaces.

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T20:47:51Z

Champion: /* Level 3 */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

This level focused on the functionality left out in Level 2 such as Load and Save, etc. Also, support for XPath provides easier navigation through the document. DOM Level 3 introduced two new data types.
1) DOMObject : Represents an arbitrary memory object
2) DOMUserData : Represents an interface to an arbitrary block of data in a DOM application.
It includes abstract schema modules which support Document Type Definition (DTD) files, XML
Schemas, and other nonspecific schema types.

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

There are certain types of document processing algorithms that you can use to traverse DOM nodes. These algorithms help to
* Determine whether a node is contained within another node
* Determine whether a node has a sibling of a certain type
* Finding a node based on the value of an attribute
* Processing the children of a node

There are two main types of DOM algorithms: position based and content based.

'''Position based '''

Position based DOM algorithms are best when you are more interested in position of nodes within a document than concerned with contents of nodes. For example, to determine whether a node occupies particular place in DOM tree is an application o f position based algorithm.

These algorithms work by examining the locations of nodes within a given DOM document. The contents of the node are secondary (if considered at all). Two common position-based algorithms are
* Determining whether a node has an ancestor node of a particular type
* Determining whether a node has a sibling of particular type.

'''Content-Based Algorithms'''

Content-based algorithms focus on the actual content of the nodes and their attributes. Common content-based algorithms are determining whether a given node contains another particular node, retrieving nodes based upon their type and finding a node with a particular attribute value.

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T20:40:09Z

Champion: /* Level 2 */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

This level added support for more types of document operations and content,
such as events and styles. As result of this, developers had standard ways to handle user events
and also work with Cascading Style Sheets (CSS) information in the documents.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T20:38:14Z

Champion: /* Level 1 */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

This Level allowed basic document operations, such as creating
and deleting nodes, working with their contents, and traversing the document tree.
Rest of the operations such as loading and saving documents, etc were left to the developer
community. So a lot of this code was implementation dependent.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T20:34:53Z

Champion: /* Browser Support */

Document Object Model 

==Introduction==

Browser Scripting Languages are widely used today, one example of which is JavaScript.. It allows the user to interact with the web page by accessing the component parts of a web page. The technique used to access these components is called Document Object Model (DOM). It creates objects corresponding to the components of the web page which scripting languages interact with to manipulate web pages.

===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

DOM plays an important role in dispalying the same chunk ofinfpormation across multiple browsers. AS a result of this
the user is able to see the same information in Internet Explorer, Firefox, Opera, etc.
In addition to the standard W3C impementation of DOM, each browser has some proprietary methods and
properties. This is the primary reason why the browsers differ in their functionality and implementation.
Internet Explorer supports ActiveXObject for handling XML Http requests while other browsers support the
MxlHttpRequest object. Another example of the differences might be that some versions prior ti IE6 do not support createAttribute(),
getAttributeNode(), or setAttributeNode() methods. An alternative to these is to use the getAttribute()
and setAttribute() methods. NetScape Navigator stores newline charachters as individual text nodes. The developer
has to take into account these changes while target the web page across multiple browser platforms.

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T20:02:01Z

Champion: /* Introduction */

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:59:53Z

Champion: /* Introduction */

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:59:36Z

Champion: /* Introduction */

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:52:25Z

Champion: /* Suggested Reading */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

This level was drafted in 2003 and 2004. It consists of five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided of this include
1) content of an XML document can be loaded into your DOM document
2) serialize your DOM document into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the DOCTYPE.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

1) W3C Document Object - http://www.w3.org/DOM/

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:52:11Z

Champion: /* Suggested Reading */

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:49:45Z

Champion: /* References / External Links */

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:46:31Z

Champion: /* Level 3 */

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:44:39Z

Champion: /* Level 2 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

This level of DOM provides additional interfaces to the existing set of functionality of DOM1. It was first proposed in 2000 and the HTML specification was updated in 2003. It has six different specifications

'''DOM2Core''' : Adds name-space specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,canceling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:42:39Z

Champion: /* Level 1 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published in 1998 and later updated in 2000

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:40:55Z

Champion: /* What is DOM */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that allows to create and modify the content,structure and style of documents. These changes can be incorporated in the document again. DOM is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:39:46Z

Champion: /* Level 1 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:39:36Z

Champion: /* Levels of DOM */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
Dom has 3 levels each with its own specifications. Generally, developers prefer to use DOM Level2 because of its wide support by Internet Explorer (IE) and Firefox. Here is a brief description of each of these levels.

===Level 1 ===

This was the first version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:27:03Z

Champion: /* Level 3 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:26:53Z

Champion: /* Level 3 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T19:26:36Z

Champion: /* Level 3 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

a) content of an XML document can be loaded into your DOM document

b) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T18:31:21Z

Champion: /* Level 2 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

'''DOM2Core''' : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

'''DOM2 HTML''' : Similar to DOM HTML

'''DOM2 Events''' : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

'''DOM2 STYLE''' : Gives access to CSS related styling and rules. Also known as DOM2 CSS

'''DOM2 Traversal and Range''' : Iterative access to DOM so that navigating and manipulating the document is easy.

'''DOM2 VIEWS''' : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

1) content of an XML document can be loaded into your DOM document

2) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T18:30:39Z

Champion: /* Level 3 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

DOM2Core : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

DOM2HTML : Similar to DOM HTML

DOM2 Events : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

DOM2STYLE : Gives access to CSS related styling and rules. Also known as DOM2 CSS

DOM2 Traversal and Range : Iterative access to DOM so that navigating and manipulating the document is easy.

DOM2 VIEWS : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

'''DOM3 Core''' : Adds more methods and changes to existing core

'''DOM3 Load and Save''' : Two major functionalities provided are :

1) content of an XML document can be loaded into your DOM document

2) serialize your DOM documnet into an XML document

'''DOM3 Validation''' : check id dynamic document is valid and conforms to the doctype.

'''DOM3 Events''' : handles keyboard and mouse related events.

'''DOM3 XPATH''' : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T18:29:51Z

Champion: /* Level 3 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

DOM2Core : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

DOM2HTML : Similar to DOM HTML

DOM2 Events : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

DOM2STYLE : Gives access to CSS related styling and rules. Also known as DOM2 CSS

DOM2 Traversal and Range : Iterative access to DOM so that navigating and manipulating the document is easy.

DOM2 VIEWS : Ability to access and update a representation of a document.

===Level 3 ===

Five different specifications

DOM3 Core : Adds more methods and changes to existing core

DOM3 Load and Save : Two major functionalities provided are :

1) content of an XML document can be loaded into your DOM document

2) serialize your DOM documnet into an XML document

DOM3 Validation : check id dynamic document is valid and conforms to the doctype.

DOM3 Events : handles keyboard and mouse related events.

DOM3 XPATH : Using XPath features to traverse the document

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T18:29:21Z

Champion: /* Level 2 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===

Six different specifications

DOM2Core : Adds namespace specific methods to DOM Core and gives control of structure of DOM elements

DOM2HTML : Similar to DOM HTML

DOM2 Events : Control of mouse related events such as targeting, capturing,cancelling. This does not handle keyboard-related events

DOM2STYLE : Gives access to CSS related styling and rules. Also known as DOM2 CSS

DOM2 Traversal and Range : Iterative access to DOM so that navigating and manipulating the document is easy.

DOM2 VIEWS : Ability to access and update a representation of a document.

===Level 3 ===

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T18:28:39Z

Champion: /* Level 1 */

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===

First version of standards published

Consists of two major parts .

DOM Core : Deals with the internal structure of the nodes of the tree. Also provides, properties and methods to create, edit and manipulate the tree.

DOM HTML : Objects, properties and methods for specific elements associated with HTML documents and tags.

===Level 2 ===
===Level 3 ===

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch6 6g ss

2010-11-17T18:27:50Z

Champion:

Document Object Model 

==Introduction==
===What is DOM===
Information is presented in XML and HTML documents is in a structured format. The technique used to access these document si called Document Object Model (DOM). Dom is platform language independent interface that alows to create and modify the content,structure and style of documents. It is based on the O-O concepts :

Objects are the main part while representing these objects. We can say that Objects are encapsulation of a set of methods and interfaces. Methods are used to access or change the object’s state and interfaces refer to declaration of a set of methods

===What DOM isn't===
1) It does not describe how to persist objects into XML or HTML, but it represents documents as a collection of objects.

2) DOM does not describt any internal representation of object or data. It is not a specific set of data structures. For example, even though we have parent-child relationship between the nodes they are logocal relationships of objects.

3) In addition, DOM does not describe what information in a document is relevant or how that information in structured. The structuring of the document is stored by the XML Infoset. DOM is just an API for to access this information.

==History==
* Before DOM became an official W3C specification, the web community the web community had started to develop ways of creating page-based script programs. This early work led to development of Dynamic HTML <refer this>, which was primarily used for richer user interfaces than plain HTML.
*LiveScript: At the time, Netscape Navigator was a very popular browser, and also was the first to bring out a programming language that would allow web pages to become interactive. The language, called LiveScript <refer> was designed at Netscape Communications and came integrated into the Netscape Navigator browser.
*JavaScript: In December 1995, LiveScript was renamed JavaScript and released as part of Netscape Navigator 2.0.
*Jscript & vbscript : Internet Explorer was updated to support two integrated languages, vbscript and Jscript. Jscript was very similar to JavaScript. In July 1996, Microsoft released Internet Explorer 3.0 supporting these languages.
*ECMAScript: Netscape delivered JavaScript to Ecma International for standardization and the work on the specification, ECMA-262, began in November 1996.
*In June 1997, ECMA adopted a hybrid version of the scripting languages called ECMAScript. However, ECMAScript arrived late for the 4.0 releases of Netscape Navigator and Internet Explorer. Each introduced their own document object model, DHTML and dHTML, that came to be called Dynamic HTML.
*DOM: At the beginning of 1997, the companies involved in this consortium (including Netscape Communications and Microsoft) decided to find a consensus around their object models to access and manipulate documents. While trying to stay as backward compatible as possible with the original browser object models, the W3C's Document Object Model (DOM) provided a better object representation of HTML documents.
*DOM on Client: <textbook> The Internet Explorer 6 and Netscape Navigator 6 browsers have achieved complete support for DOM Level 1. Other browser vendors followed them.
*DOM on Server: Soon did the companies realized that the benefits of DOM can be applied on server side as well as client side. DOM implementations began appearing for server-side products as well. One well-known is the Xerces <http://xerces.apache.org/xerces-c/>parser from Apache Foundation.
* HTML and XML: In 1996, a new markup language, the Extensible Markup Language (XML), was developed in the W3C as well. Meant to remove the HTML language's extensibility restrictions, the idea of developing an object model for XML quickly became another goal of the DOM effort.
*In June 2004, Ecma International published ECMA-357 standard, defining an extension to ECMAScript, known as E4X (ECMAScript for XML).

==Levels of DOM==
===Level 1 ===
===Level 2 ===
===Level 3 ===

==Navigation==
(I will format this afterwards.. there is a table of around 20 lines to be added)
DOM represents a document using a tree structure. This tree can be thought as a collection of individual sub trees.
image here

<center>
[[Image:domExample.jpg]]
</center>

Figure <x>.1 shows sample HTML document. Figure <x>.2 shows its Document tree diagram.

The <BODY> branch can be thought as its own tree within the larger document tree. Each box in <X>.2 is called a node in DOM terminology. The DOM API provides several interfaces in the Core module for manipulating nodes and inserting/extracting information to and from nodes. There are also methods present for determining and changing the relationships between nodes and discovering the type of a particular mode. Lets first have a look at different object types supported by DOM.

''' DOM Core Node Object'''
A node is an object representation of a particular element in the document's context. Nodes have special names, depending on where they are located in the document tree and what their position is relative to other nodes.

All documents have a root node.

Each element in Figure <X>.2 extends from Node object. There are few properties of Node object which are available to all DOM objects are extended from Node object.

'''Types of Node Objects'''
{| class="wikitable" border="1" style="width: 900px; margin-left:60px; border-style:solid;border:thin;border-spacing:0x;"
|- style="text-align: center;border-style:solid;border:thin;border-spacing:0x; "
! Node Type
! Description
|-
| Element
| Represents an element in an HTML or XML document, which is represented by tags. In Figure <X>.2, <BODY> node is an element type
|-
| Attribute
| Represents an element's attribute. A tag with the syntax <img src = "picture.jpg"> has an Attribute node src.
|-
| Text
| Represents the textual content of an element. In Figure <X>.2, the node has text child node which represents the text "Bold Text"
|-
| CDATA Selection
|Represents a Character Data selection in an XML document
|-
| Comment
| Represents a comment. Comments are of the form 
|-
| Document
| Represents the root node of a document
|-
| DocumentType
| Each Document node has a DocumentType node that provides a list of entities defined in the document
|-
| DocumentFragment
| They are lightweight or minimal Document nodes. They help when we want to extract just a portion of a document for processing
|-
| ProcessingInstruction
| Represents instructions to be used by the document processor
|-
| Entity
| Represents an entity in XML document
|-
| EntityReference
| Represents an entity reference in the document
|-
| Notation
| Represents a notation in an XML document. Notations have no parent nodes
|-
|}

- Node name, values, types
- Node parents, children, siblings
To easily navigate the document tree, each Node object has number of predefined properties that reference various parts of the tree. Each of these properties references an actual DOM object, with exception of childNOdes which references a NodeList of DOM objects (like an array).
parentNode: references a single direct parent of the specific node.
childNodes: references all child elements of a node.
firstChild: references first child in child nodes.
lastChild: references last child in child nodes.
previousSiblings: Represents sibling node immediately before the selected node.
nextSiblings: Represents sibling node immediately after the selected node.

- Node Attributes <https://developer.mozilla.org/En/DOM/Node.attributes>
Just like rest of DOM document, attributes are also based on the Node object, but they are not part of the general parent/child relationship tree. Attributes are instances of Attr pbject are contained in a NamedNodeMap in node's attributes property.
Accessing Node Attributes:

x=element.attributeName
if attributeName is a W3C defined attribute and an Attribute Node for the element, (eg id) x gets assigned the value of that Attribute Node
if attributeName isn't a W3C defined attribute or an attribute node for the element, x gets assigned the value of the attributeName property for element (JavaScript object)

x=element.attributes.attributeName.value or x= element.attributes['attributeName'].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x = element.attributes[indexNumber].value
if attributeName is an Attribute Node for the element, x gets assigned that node's value. If attributeName isn't an Attribute Node, produce EXCEPTION

x= element.getAttribute('attributeName')
if attributeName is an Attribute Node for the element, x gets assigned its value. If AttributeName isn't an Attribute Node for the element, x gets assigned the null value

- Node OwnerDocument Property
This property can be used to reference the root document to which a node belongs.

'''Core Element Object'''
Elements inherit from Node object. All element objects have properties and methods of the Node object as well as a few others that facilitate manipulating the attributes of node and locating child element objects.

Methods for manipulating 'attributes' property of base node:
getAttribute(name) allows to retrieve an attribute based on the name of the attribute as a string.
setAttribute(name, value) allows you to set the value of an attribute based on the name of the attribute as a string.
removeAttribute(name) allows to remove the value of an attribute based on the name of the attribute as a string.

Methods for manipulating attributes bsed on actual DOM Attr node object:
getAttributeNode(name): Allows to retrieve the Attr node of the specified attribute.
setAttributeNode(newAttr): Allows to set attributes based on new instances of the Attr object
removeAttributeNode(oldAttr): Allows to remove the attribute node the same way one can remove a child node using removeChild() method.

Locating Element objects within Element objects:
The getElementByTagName() method returns the NodeList object referencing all ancestors with the given tag name.The resulting list is the list of all the elements in the order they appear in DOM Document if read left to right and top to bottom.

'''Core Document Object'''
The Document interface represents the entire document. IT serves as the primary gateway to accessing the document's data. It represents root of the document tree. It also contains methods necessary for creating new document objects such as elements, sattributes, Text nodes, comments.

The document.documentElement property
It is a shortcut to the root element fo the document.

Creating nodes with document methods
createAttribute(name): Creates Attr nodes of type Node.ATTRIBUTE_NODE
createComment(data): Crates Comment nodes of type Node.COMMENT_NODE
crateElement(tagName): Creates element nodes of type Node.ELEMENT_NODE
createTextNode(date): Creates Text nodes of type Node.TEXT_NODE

Locating Elements with Document methods:
The getElementById('ID') method returns one element corresponding to the ID. This method is singular and only returns one element.

The getElementsByTagName('TAG') method returns a NodeList containing all the elements in the document with the same tag name as TAG. The NodeList is ordered by the order in which the Elements were encountered in a preorder traversal of the document tree. If TAG is *, all tags are matched.

The importNode() method imports a node into this document from another document. The returned node has no parent node. A copy of source node is created, thus the source document is not affected in any way. The Documents and DocumentTypes nodes cannot be imported.

==Example DOM==
<center>
[[Image:domExample2.jpg]]
</center>
==Algorithms==

==Browser Support==

==Applications==

==Future DOM==
==Conclusion==

==Suggested Reading==

==References / External Links==

# Marcus Arnstrom, Mikael Christiansen, Daniel Sehlberg (May 2003), ''Prototype-based programming''.
# Borning A (1986), ''Classes versus Prototypes in Object-Oriented Languages'', IEEE Computer Society Press, [http://portal.acm.org/citation.cfm?id=324538 In Proceedings of the IEEE/ACM Fall Joint Conference].
# [https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model Prototype and Class based programming languages]
# [http://docstore.mik.ua/orelly/web/jscript/ch07_04.html Concept of Object Prototypes]
# [http://www.quirksmode.org/js/introevents.html Event Delegation with JavaScript]
# [http://www.grin.com/e-book/96313/the-newton-script-programming-language The NewtonScript Programming Language]
# [http://www.directessays.com/viewpaper/78763.html Prototype Theory]
# James Noble, Antero Taivalsaari, Ivan Moore, ''Prototype Based Programming - Concepts, Languages and Applications''
# C. Dony, J. Malenfant, D. Bardon, [http://www.lirmm.fr/~dony/postscript/proto-book.pdf ''Classifying Prototype Based Languages'']
# [http://www.learn-javascript-tutorial.com/Prototype-Based-Inheritance.cfm Prototype-Based Inheritance]
# [http://en.wikipedia.org/wiki/Prototype-based_programming Criticism of prototype based programming languages]

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T21:58:02Z

Champion: /* Decomposition */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented languages do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle those messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject does not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, which interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagram shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

Consider a case, when we wish to provide a class for Vehicles. Now, Car and Bus are types of vehicles. But each has its own Seating Capacity and the number of wheels is also different. If we do not have two different classes like Car and bus then, we have to add separate method for each type of vehicle with different names such as carSeatingCapacity(), busSeatingCapacity(), carNoOfWwheels(), and busNoOfWwheels() which will clutter the class.

A better solution is to use Object Oriented Decomposition. In this, we first find a subset of methods or properties that do not interact with the rest of the class. In this case, it would be the Seating Capacity and number of wheels. So, we just provide these methods in an interface and let the classes use this interface. Hence decomposition in different classes helps in reducing complexity of the design. Thus the main class is divided into smaller classes.

The example below shows this concept:

<pre>
interface Vehicle
{
void SeatingCapacity ();
void NoOfwheels();
}

class Car implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a car
}

void NoOfwheels()
{
// implementation for number of wheels of a car
}
}

class Bus implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a bus
}

void NoOfwheels()
{
// implementation for number of wheels of a bus
}
}
</pre>

In above code, we have defined an interface Vehicle. Two classes Car and Bus implement this interface. The SeatingCapacity and NoOfWheels methods are defined in the interface. But, the classes Car and Bus provide their own implementation of these methods. This shows how a system can be decomposed into smaller parts.

One other example of Decomposition is MVC ( Model-View-Controller ) architecture. Here, first we analyze our system and come up with a different controller for each task. Thus, we have a specific controller assigned for certain specific tasks. This makes the implementation easier and easy to manage. The View refers to the interface as seen by a user of the system. The Controller takes the input from user and instructs the model to perform the required actions on it. The Model interacts with the backend database to retrieve and update the required information.

In C#, we can break down a class implementation into several class files and you divide your object the way you want.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T21:55:16Z

Champion: /* Message Forwarding */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented languages do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle those messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject does not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, who interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

Consider a case, when we wish to provide a class for Vehicles. Now, Car and Bus are types of vehicles. But each has its own Seating Capacity and the number of wheels is also different. If we do not have two different classes like Car and bus then, we have to add separate method for each type of vehicle with different names such as carSeatingCapacity(), busSeatingCapacity(), carNoOfWwheels(), and busNoOfWwheels() which will clutter the class.

A better solution is to use Object Oriented Decomposition. In this, we first find a subset of methods or properties that do not interact with the rest of the class. In this case, it would be the Seating Capacity and number of wheels. So, we just provide these methods in an interface and let the classes use this interface. Hence decomposition in different classes helps in reducing complexity of the design. Thus the main class is divided into smaller classes.

The example below shows this concept:

<pre>
interface Vehicle
{
void SeatingCapacity ();
void NoOfwheels();
}

class Car implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a car
}

void NoOfwheels()
{
// implementation for number of wheels of a car
}
}

class Bus implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a bus
}

void NoOfwheels()
{
// implementation for number of wheels of a bus
}
}
</pre>

In above code, we have defined an interface Vehicle. Two classes Car and Bus implement this interface. The SeatingCapacity and NoOfWheels methods are defined in the interface. But, the classes Car and Bus provide their own implementation of these methods. This shows how a system can be decomposed into smaller parts.

One other example of Decomposition is MVC ( Model-View-Controller ) architecture. Here, first we analyze our system and come up with a different controller for each task. Thus, we have a specific controller assigned for certain specific tasks. This makes the implementation easier and easy to manage. The View refers to the interface as seen by an user of the system. The Controller takes the input from user and instructs the model to perform the required actions on it. The Model interacts with the backend database to retrieve and update the required information.

In C#, we can break down a class implementation into several class files and you divide your object the way you want.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T21:52:09Z

Champion: /* Inheritance */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented languages do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle that messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject did not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument, that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, who interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

Consider a case, when we wish to provide a class for Vehicles. Now, Car and Bus are types of vehicles. But each has its own Seating Capacity and the number of wheels is also different. If we do not have two different classes like Car and bus then, we have to add separate method for each type of vehicle with different names such as carSeatingCapacity(), busSeatingCapacity(), carNoOfWwheels(), and busNoOfWwheels() which will clutter the class.

A better solution is to use Object Oriented Decomposition. In this, we first find a subset of methods or properties that do not interact with the rest of the class. In this case, it would be the Seating Capacity and number of wheels. So, we just provide these methods in an interface and let the classes use this interface. Hence decomposition in different classes helps in reducing complexity of the design. Thus the main class is divided into smaller classes.

The example below shows this concept:

<pre>
interface Vehicle
{
void SeatingCapacity ();
void NoOfwheels();
}

class Car implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a car
}

void NoOfwheels()
{
// implementation for number of wheels of a car
}
}

class Bus implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a bus
}

void NoOfwheels()
{
// implementation for number of wheels of a bus
}
}
</pre>

In above code, we have defined an interface Vehicle. Two classes Car and Bus implement this interface. The SeatingCapacity and NoOfWheels methods are defined in the interface. But, the classes Car and Bus provide their own implementation of these methods. This shows how a system can be decomposed into smaller parts.

One other example of Decomposition is MVC ( Model-View-Controller ) architecture. Here, first we analyze our system and come up with a different controller for each task. Thus, we have a specific controller assigned for certain specific tasks. This makes the implementation easier and easy to manage. The View refers to the interface as seen by an user of the system. The Controller takes the input from user and instructs the model to perform the required actions on it. The Model interacts with the backend database to retrieve and update the required information.

In C#, we can break down a class implementation into several class files and you divide your object the way you want.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T18:33:49Z

Champion: /* Decomposition */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented language's do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle that messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject did not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument, that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, who interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

Consider a case, when we wish to provide a class for Vehicles. Now, Car and Bus are types of vehicles. But each has its own Seating Capacity and the number of wheels is also different. If we do not have two different classes like Car and bus then, we have to add separate method for each type of vehicle with different names such as carSeatingCapacity(), busSeatingCapacity(), carNoOfWwheels(), and busNoOfWwheels() which will clutter the class.

A better solution is to use Object Oriented Decomposition. In this, we first find a subset of methods or properties that do not interact with the rest of the class. In this case, it would be the Seating Capacity and number of wheels. So, we just provide these methods in an interface and let the classes use this interface. Hence decomposition in different classes helps in reducing complexity of the design. Thus the main class is divided into smaller classes.

The example below shows this concept:

<pre>
interface Vehicle
{
void SeatingCapacity ();
void NoOfwheels();
}

class Car implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a car
}

void NoOfwheels()
{
// implementation for number of wheels of a car
}
}

class Bus implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a bus
}

void NoOfwheels()
{
// implementation for number of wheels of a bus
}
}
</pre>

In above code, we have defined an interface Vehicle. Two classes Car and Bus implement this interface. The SeatingCapacity and NoOfWheels methods are defined in the interface. But, the classes Car and Bus provide their own implementation of these methods. This shows how a system can be decomposed into smaller parts.

One other example of Decomposition is MVC ( Model-View-Controller ) architecture. Here, first we analyze our system and come up with a different controller for each task. Thus, we have a specific controller assigned for certain specific tasks. This makes the implementation easier and easy to manage. The View refers to the interface as seen by an user of the system. The Controller takes the input from user and instructs the model to perform the required actions on it. The Model interacts with the backend database to retrieve and update the required information.

In C#, we can break down a class implementation into several class files and you divide your object the way you want.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T18:32:21Z

Champion: /* Decomposition */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented language's do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle that messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject did not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument, that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, who interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

Consider a case, when we wish to provide a class for Vehicles. Now, Car and Bus are types of vehicles. But each has its own Seating Capacity and the number of wheels is also different. If we do not have two different classes like Car and bus then, we have to add separate method for each type of vehicle with different names such as carSeatingCapacity(), busSeatingCapacity(), carNoOfWwheels(), and busNoOfWwheels() which will clutter the class.

A better solution is to use Object Oriented Decomposition. In this, we first find a subset of methods or properties that do not interact with the rest of the class. In this case, it would be the Seating Capacity and number of wheels. So, we just provide these methods in an interface and let the classes use this interface. Hence decomposition in different classes helps in reducing complexity of the design. Thus the main class is divided into smaller classes.

The example below shows this concept:

<pre>
interface Vehicle
{
void SeatingCapacity ();
void NoOfwheels();
}

class Car implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a car
}

void NoOfwheels()
{
// implementation for number of wheels of a car
}
}

class Bus implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a bus
}

void NoOfwheels()
{
// implementation for number of wheels of a bus
}
}
</pre>

In above code, we have defined an interface Vehicle. Two classes Car and Bus implement this interface. The SeatingCapacity and NoOfWheels methods are defined in the interface. But, the classes Car and Bus provide their own implementation of these methods. This shows how a system can be decomposed into smaller parts.

One other example of Decomposition is MVC ( Model-View-Controller ) architecture used in Ruby on Rails.
Here, first we analyze our system and come up with a different controller for each task. Thus, we have a specific controller
assigned for certain specific tasks. This makes the implementation easier and easy to manage. The View refers to the interface as seen by an user of the system.
The Controller takes the input from user and instructs the model to perform the required actions on it.
The Model interacts with the backend database to retrieve and update the required information.

In C#, we can break down a class implementation into several class files and you divide your object the way you want.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T18:29:56Z

Champion: /* Decomposition */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented language's do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle that messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject did not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument, that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, who interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

Consider a case, when we wish to provide a class for Vehicles. Now, Car and Bus are types of vehicles. But each has its own Seating Capacity and the number of wheels is also different. If we do not have two different classes like Car and bus then, we have to add separate method for each type of vehicle with different names such as carSeatingCapacity(), busSeatingCapacity(), carNoOfWwheels(), and busNoOfWwheels() which will clutter the class.

A better solution is to use Object Oriented Decomposition. In this, we first find a subset of methods or properties that do not interact with the rest of the class. In this case, it would be the Seating Capacity and number of wheels. So, we just provide these methods in an interface and let the classes use this interface. Hence decomposition in different classes helps in reducing complexity of the design. Thus the main class is divided into smaller classes.

The example below shows this concept:

<pre>
interface Vehicle
{
void SeatingCapacity ();
void NoOfwheels();
}

class Car implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a car
}

void NoOfwheels()
{
// implementation for number of wheels of a car
}
}

class Bus implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a bus
}

void NoOfwheels()
{
// implementation for number of wheels of a bus
}
}
</pre>

In above code, we have defined an interface Vehicle. Two classes Car and Bus implement this interface.
The SeatingCapacity and NoOfWheels methods are defined in the interface and no implementation for them is provided.
But, the classes Car and Bus provide their own implementation of these methods.
This shows how a system can be decomposed into smaller parts.

One other example of Decomposition is MVC ( Model-View-Controller ) architecture used in Ruby on Rails.
Here, first we analyze our system and come up with a different controller for each task. Thus, we have a specific controller
assigned for certain specific tasks. This makes the implementation easier and easy to manage. The View refers to the interface as seen by an user of the system.
The Controller takes the input from user and instructs the model to perform the required actions on it.
The Model interacts with the backend database to retrieve and update the required information.

In C#, we can break down a class implementation into several class files and you divide your object the way you want.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T18:28:49Z

Champion: /* Decomposition */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented language's do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle that messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject did not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument, that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, who interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

Consider a case, when we wish to provide a class for Vehicles. Now, Car and Bus are types of vehicles. But each has its own Seating Capacity and the number of wheels is also different. If we do not have two different classes like Car and bus then, we have to add separate method for each type of vehicle with different names such as carSeatingCapacity(), busSeatingCapacity(), carNoOfWwheels(), and busNoOfWwheels() which will clutter the class.

A better solution is to use Object Oriented Decomposition. In this, we first find a subset of methods or properties that do not interact with the rest of the class. In this case, it would be the Seating Capacity and number of wheels. So, we just provide these methods in an interface and let the classes use this interface. Hence decomposition in different classes helps in reducing complexity of the design. Thus the main class is divided into smaller classes.

The example below shows this concept:

interface Vehicle
{
void SeatingCapacity ();
void NoOfwheels();
}

class Car implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a car
}

void NoOfwheels()
{
// implementation for number of wheels of a car
}
}

class Bus implements Vehicle
{
void SeatingCapacity()
{
// implementation for seating capacity of a bus
}

void NoOfwheels()
{
// implementation for number of wheels of a bus
}
}

In above code, we have defined an interface Vehicle. Two classes Car and Bus implement this interface.
The SeatingCapacity and NoOfWheels methods are defined in the interface and no implementation for them is provided.
But, the classes Car and Bus provide their own implementation of these methods.
This shows how a system can be decomposed into smaller parts.

One other example of Decomposition is MVC ( Model-View-Controller ) architecture used in Ruby on Rails.
Here, first we analyze our system and come up with a different controller for each task. Thus, we have a specific controller
assigned for certain specific tasks. This makes the implementation easier and easy to manage. The View refers to the interface as seen by an user of the system.
The Controller takes the input from user and instructs the model to perform the required actions on it.
The Model interacts with the backend database to retrieve and update the required information.

In C#, we can break down a class implementation into several class files and you divide your object the way you want.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T17:19:37Z

Champion: /* Decomposition */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented language's do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle that messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject did not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument, that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problems. In object oriented terminology, it is the process of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interact with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other words, if implementation of one of the function changes, all other functions which are dependent on this function also need to be changed.

To avoid this problem, Decomposition in Object-Oriented Design is preferred. In this, we create well defined objects, who interact with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that a real world problem can be broken down in small objects and classes to manage the system.
For better understanding, let's consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning of the system. Now if there is a problem with the wheel, this does not affect functionality of other objects. Only the central controller and the wheel need to implement the necessary changes.

'''Inheritance vs Decomposition'''

*In Object Oriented Programming, Multiple Inheritance plays an important role. Languages like C++ allow Multiple Inheritance. In industry, to implement large systems this property is used frequently. However, due to well known diamond problem for Multiple Inheritance and complex hierarchy of the classes, programmers find less visibility of the functionality in an Inheritance tree. Hence, Decomposition is considered as a solution to these problems. To solve these issues, many researchers are working on finding reliable algorithms to decompose large Inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance, we need to define methods in Super class which can be used by objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect other modules. On the other hand, Inheritance binds two different classes so that change in one module breaks down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2

CSC/ECE 517 Fall 2010/ch3 S30 PS

2010-10-15T17:12:09Z

Champion: /* Message Forwarding */

'''''Decomposition, Message Forwarding, and Delegation versus Inheritance in OOP Design'''''

== Introduction ==

Object Oriented Programming concentrates on the design of a system using objects as individual entities which have different states and behaviors. Object Oriented Design (OOD) refers to the process of designing the objects and the level of interaction between those.

Object Oriented Approach has advantages such as code is easy to maintain and it can be reused. Thus it ensures minimal duplication in system and improves the quality of the software. When we think of object oriented programming, Inheritance, Encapsulation, Polymorphism features attract our attention. However, there are many other alternatives to the traditional inheritance such as Delegation, Message Forwarding and Decomposition.

Inheritance is the mechanism by which we can extract common functionality between hierarchical classes. A method can be implemented only once in a hierarchical class system and can be accessed through its descendants. Delegation deals with passing the execution control of method to another class at run time. Message Forwarding facilitates communication between different objects by sending and receiving messages. Decomposition is the technique of breaking complex problem into smaller parts so that they can be easily implemented and managed.

In this chapter, we will explain the concept of Inheritance first, later we will contrast it with Delegation, Message Forwarding and Decomposition.

== Inheritance ==

Inheritance is a powerful concept in Object Oriented Programming which allows code reuse. In this, functionality of base class can be inherited by its subclasses. At the same time a subclass can have its own functionality.

There two types of inheritance

'''Single Inheritance'''

This property restricts that a class can only inherit from one class. Java and Ruby are examples of object-oriented languages that have single inheritance.

'''Multiple Inheritance'''

This property allows a single class to inherit functionality from multiple classes. C++ allows Multiple Inheritance, however, the major drawback of this property is that it leads to the classical [http://en.wikipedia.org/wiki/Diamond_problem Diamond Multiple Inheritance Problem]. This is a primary reason why most of the other Object Oriented language's do not support Multiple Inheritance.

The concept of Inheritance can be better explained with a code in Ruby.
In ruby we have single Inheritance.

''Example in Ruby''

<pre>
class Animal
def sleep
puts " I want to sleep "
end
end

class Herbivorous < Animal
def eat
puts " I want to eat plants "
end
end
</pre>

''Code execution''

<pre>
MyAnimal = Herbivorous.new
MyAnimal.sleep #I want to sleep
MyAnimal.eat #I want to eat plants
</pre>

Here the class Herbivorous inherits class Animal. So when we create an object of the Herbivorous class we are able to inherit methods from the Animal class. Here is the simple UML diagram to explain inheritance.

[[Image:Inheritance-s30.jpg|frame|center|UML diagram for inheritance]]

'''When to use inheritance'''

*Inheritance is used when there is an IS-A relationship between two classes. For example, Herbivorous is-an Animal.

*When code re-usability is desired.

*Inheritance is used when sub categories can be created from complex class.

== Delegation ==

As the word suggests, delegation means assigning the task to some other entity. In Object Oriented Programming terminology, it can be explained as, the process of passing execution control from one method to other method which can be in a different class. Delegation is also called as Dynamic Inheritance.

Let’s say there are two objects A and B, A has some method and attributes, which B is interested in using. Thus, when two objects are not of the same type, above functionality can be achieved through Delegation. This mechanism is suitable when we have to decide which functionality needs to be invoked based on user input at run time.

''Code example in Ruby''

<pre>
module Airplane
def motion
raise NotImplementedError.new
end
end

class Wheel
include Airplane
def motion
puts " Performs circular motion."
end
end

class Wing
include Airplane

def motion
puts "Performs Vertical motion"
end
end

class AirplaneActivity
include Airplane
def initialize
@var = Wing.new
end

def motion
@var.motion
end

def setWing
@var = Wing.new
end
def setWheel
@var = Wheel.new
end
end
</pre>

The above Ruby example creates a class ''Airplane'' which has method ''motion'' in it. This method throws ''NotImplementedError'' which indicates that there is no definition for this method. The classes ''Wheel'',''Wing'' and ''AirplaneActivity'' include the class ''Airplane'' in their definition and override ''motion'' method. In the class ''AirplaneActivity'', we provide ''initialize'' method, which initializes the instance variable to an object of class ''Wing''. Also, the methods ''setWing'' and ''setWheel'' set different object values for instance variable ''@var''.

<pre>

obj = AirplaneActivity.new
obj.motion # output => "Performs Vertical motion"
obj.setWheel # create new object of Wheel class
obj.motion # output => "Performs Circular motion"

</pre>

The above code is a sample test code which will reveal the Delegation behavior. The first statement creates an object obj of class ''AirPlaneActivity''. This calls the ''initialize'' method and creates a ''Wing'' class object. Next line invokes ''motion'' method of class ''AirPlaneActivity'' which in turn calls ''motion'' method of ''Wing'' class. This is possible because the current value of ''@var'' points to object of ''Wing'' class. In third line, using ''setWheel'', the ''@var'' value is set to ''Wheel's'' object. Due to this the ''motion'' method of ''Wheel'' class will get invoked. In this way, ''motion'' method of ''AirPlaneActivity'' class delegates control to different ''motion'' methods of ''Wing'' and ''Wheel'' class based on the value of ''@var'' instance variable.

[[Image:DelegationUML-s30.jpg|frame|center|UML diagram for delegation]]

Above [http://en.wikipedia.org/wiki/Unified_Modeling_Language UML] diagram depicts the delegation pattern and its behavior at run-time. It also shows how all the classes are related to each other.

'''Delegation Vs. Inheritance'''

* Delegation is used when there is HAS-A relationship between two objects. For example, Airplane has an engine and wings. Relationship between all these three classes depicts the HAS-A relationship. Based on which activity to be monitored, corresponding motion() method is invoked. This is not the case with Inheritance, where to get a slightly different functionality, we have to over write the existing method.

* Delegation should be used when the two objects are of different types but have some similar functionality.

* Delegation can be used where components behave identically, but this situation may change over time.

* Delegation leverages loose coupling in components and hence alteration of one component does not affect the system much. In Inheritance, on the other hand, there is a tight coupling between parent class and its children. Hence modification in parent's functionality may lead to logical error in all its children.

* Delegation is sometimes called as Dynamic Inheritance as binding happens at run time. In above example, based on the object, corresponding methods are invoked. This is not the case with Inheritance as the objects to be invoked are determined during compilation.

'''Pitfalls of delegation'''

* Delegation increases code size as compared to Inheritance. In above code, we have written one interface and three classes to explain the concept of delegation.

== Message Forwarding ==

In Object Oriented Programming, Message Forwarding is one of the most powerful techniques. In this, when a message is sent to an object and if that object does not process that particular method, then instead of displaying an error, receiving object gets a second chance to process a message.

[http://en.wikipedia.org/wiki/Smalltalk SmallTalk] and [http://en.wikipedia.org/wiki/Objective-C Objective-C] supports this mechanism.

Let’s look at a simple example which explains Message Forwarding. Say we have two classes ‘Nurse’ and ‘Doctor’.

[[Image:Msgfws30.jpg|frame|center|Message forwarding ]]

In above example, when the message for ‘operate’ comes to Nurse, it does not handle that messages as ‘Nurse don’t do operations alone and has to be done by doctor.’ Hence instead of giving an error, it forwards that message along with input parameters to the ‘Doctor’ object. Doctor object handles operate method and return the response to Nurse object. From an abstract view, it appears that Nurse object is handling the message, but in reality, Doctor’s object is working on it. Message Forwarding simulates Multiple Inheritances in Object Oriented Programming as object that forwards message can inherit method from its super class and the class where it is forwarding the method. In other words, Nurse inherits functionality from its super class and Doctor class.

For selection of different objects to forward the message, observer design pattern is used. Languages like [http://en.wikipedia.org/wiki/Objective-C objective-C] have extensive support for message forwarding. To implement this, [http://en.wikipedia.org/wiki/Observer_pattern observer design pattern] is used.
There are four parts to a message: a receiver object, a method name, optional method arguments, and an optional return value are to be handled.

''Code example – objective -C''

<pre>

id newObject; // could be any object;
newObject = [[NewObject alloc] init]; // create and initialize the object
[newObject doSomethingWith: anotherObject]; // send it a message.

- (void) forwardInvocation: (NSInvocation*)anInvocation
{
if ([anObject respondsToSelector: [anInvocation selector]])
return [anInvocation invokeWithTarget: anObject];
else
return [self doesNotRecognizeSelector: [anInvocation selector]];
}
</pre>

In above code, newObject is an object and doSomethingWith is a method definition which is unknown to newObject. As the message to object binding happens at run-time, compiler will still compile the code. At run-time objective-C will find out that newObject did not recognize the doSomethingWith: message. Instead of giving error, the runtime sends another message to newObject as forwardInvocation: message. Now if newObject knows the anObject then it will forward. Self here refers to the object which receives the message, in the case its newobject.

Message forwarding can also be simulated from other objected oriented languages.

''Example using JavaScript''

<pre>

// This code will instantiated object 'receiver'
// and call method 'receivingFunction'

var receiver = new someClass();
m(receiver, 'receivingFunction', someArgument);

// object implements 'forwardInvocation' to send the message
// to next object.

var class1 = new Class({
forwardInvocation: function(){
return object2; // Forwarding
}
});

var class2 = new Class({
forwardInvocation: function(){
return object3; // Forwarding
}
});

var class3 = new Class({
receivingFunction: function(){
return 'Message received.' //Actual message
}
});

object1 = new class1();
object2 = new class2();
object3 = new class3();

alert(m(object1, 'receivingFunction'));
</pre>

In above code, alert message will send a message to obejct1 for handling 'receivingFunction'. As object1 does not handle it, it will send message to object2 and so on till actual function gets called. For this to work, we have to implement 'forwardInvocation' method for forwarding the message.

'''Message Forwarding Vs. Inheritance'''

* Message Forwarding leverages functionality of reusing code of some other class. This functionality cannot be implemented using Inheritance as code reuse is done only in the inheritance hierarchy and not beyond that.

* Compared to Inheritance, Message Forwarding provides privilege of loosely coupled design as different objects can communicate via exchange of messages. In Inheritance, there is always a tight coupling.

* This helps data to be sent to objects of different classes in a very efficient manner. Languages like objective –C or SmallTalk have specific methods to implement this. Also Message Forwarding can be implemented with other object oriented languages like Java , Ruby and many more as shown in example above.

* The change of a state in one object can be reflected in another object without keeping the objects tightly coupled.

* In Inheritance, if we want custom implementation, then we have to override a method to provide new functionality, in which a method prototype can not be changed. If user wants to change prototype of a method, then all overridden methods have to be changed. In contrast to that, in Message Forwarding there are no dependencies between communicating objects, so no design changes are required.

'''Pitfalls in Message Forwarding'''

*In Message Forwarding, each argument has to allocate extra memory, however in Inheritance, derived class uses references to arguments passed to the methods of parent class. As an example, if a big string (around 2000 characters) has to be passed as an argument, that much memory has to be allocated in Message Forwarding. However, in Inheritance as all the objects are tightly coupled, sending an object reference is enough.

== Decomposition ==

Decomposition follows the divide and conquer strategy which helps to solve complex problem. In object oriented terminology, it is the method of breaking down bigger problem or system into smaller classes and objects which gives clear understanding of its functionality. The different parts of a systems after decomposition interacts with each other through well defined interfaces.

In non-object oriented languages such as C, large systems can be broken down by writing different functions. This is called as functional decomposition, however there exists tight coupling across different functions. In other word, if implementation of one of the function changes, all other functions which are dependent on this function also need to changed.

To avoid this problem, Decomposition in object-oriented design is preferred. In this, we create well defined objects, who interacts with each other through well defined interfaces. If the implementation in one of the objects changes then, only two objects between which the interaction takes place need to be changed. In sum, changes in one of the objects does not affect large portion of the system.

[[Image:Decompose-s30.jpg|frame|center|Decomposition]]

The above diagrams shows that the real world problem can be broken down in small objects and classes to manage the system.
For better understanding lets consider the above airplane system example. The airplane consists of wheel, wings, propellers, cockpit, etc. In Object Oriented Decomposition we create objects of these classes. Also we create an object Controller which interacts with all these objects and is responsible for the overall functioning the system. Now if there is a problem with the wheel, this does not affect the functionality of other objects. Only the central controller and the wheel need to implement the necessary changes. This does not affect the functionality of other objects.

'''Inheritance vs Decomposition'''

*In object oriented programming multiple inheritance plays an important role. Languages like C++ allowed multiple inheritances. In industry, to implement large systems this property is used frequently. However due to well known diamond problem for multiple inheritances and complex hierarchy of the classes programmers finds less visibility of the functionality in inheritance tree. Hence decomposition is considered as a solution to these problems. To solve these issues many researchers are working on finding reliable algorithms to decompose the large inheritance based hierarchical systems. M. Habib, M. Huchard and J. Spinrad have covered these aspects in their paper named [http://www.springerlink.com/content/v3384m611187nl12/ A Linear Algorithm To Decompose Inheritance Graphs Into Modules]

*In Inheritance we need to define methods in the Super class which can be used by the objects in sub class. This can be achieved by using the extends functionality in Java. Where as in case of Decomposition, objects define their own methods. So there is minimal dependency between interacting objects.

*When the system is huge and the depth hierarchy tree is large, decomposition should be used.

*When we want components of the system to be loosely coupled, changes made in one module should not affect the other module. On the other hand, inheritance bind two different classes so that change in one module brake down most of the system.

== Conclusion ==

Inheritance plays a vital role in object oriented programming to design more structured and reliable systems. However there are always some cases where inheritance is not a suitable option.

Inheritance is tightly coupled. Inheritance is best suited when the size of the system is small. It is used when we have a IS-A relationship between the classes. As the number of classes in the system grows, we have to look for Decomposition of these classes into smaller ones. This modularized your system since the objects become loosely coupled.

Delegation is used when we have a HAS-A relation between the classes. Delegation is a type of dynamic binding. Message Forwarding helps to reuse the code of some other class. The messages are passed at run time to invoke methods of other classes.

Thus these OOD Principles help to design and implement the system in an effective manner. This article summarizes some of the alternatives to the traditional inheritance. Also we get guidance as when to use inheritance and when to consider different alternatives.

== References ==
Object Oriented Development by Grady Booch - http://www.ics.uci.edu/~taylor/classes/121/BoochOOD003.pdf

Delegation (programming) - http://en.wikipedia.org/wiki/Delegation_%28programming%29

API documentation for Objective-C - http://www.gnustep.org/resources/documentation/Developer/Base/Reference/NSObject.html

objective-C - http://en.wikipedia.org/wiki/Objective-C

Decomposition - http://www.ibm.com/developerworks/webservices/library/ar-soastyle/

Design Patterns: Elements of Reusable Object-Oriented Software - http://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612

Inheritance Decomposed - http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.18.5919

Two object oriented decomposition methods, by V Rajlich 1988 - http://portal.acm.org/citation.cfm?id=339990

Decomposition/Generalization Methods for Object Oriented Programming by Vaclav Rajlich J. - http://portal.acm.org/citation.cfm?id=179804

Fundamentals of computer-aided engineering - http://www.amazon.com/Fundamentals-Computer-Aided-Engineering-Benny-Raphael/dp/0471487155

Head First Object-Oriented Analysis and Design - http://www.amazon.com/Head-First-Object-Oriented-Analysis-Design/dp/0596008678/ref=sr_1_2?s=books&ie=UTF8&qid=1287108606&sr=1-2