Document Object Model in Java Script with Detail

Every web page resides inside a browser window which can be considered as an object.

A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.

The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.

• Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
• Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.
• Form object − Everything enclosed in the <form>...</form> tags sets the form object.
• Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.

Here is a simple hierarchy of a few important objects −

There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content.

• The Legacy DOM − This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.
• The W3C DOM − This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.
• The IE4 DOM − This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features.
• 
  

1. The Legacy DOM − 

This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.

This model provides several read-only properties, such as title, URL, and lastModified provide information about the document as a whole. Apart from that, there are various methods provided by this model which can be used to set and get document property values.

Document Properties in Legacy DOM

Here is a list of the document properties which can be accessed using Legacy DOM.

Sr.No.	Property & Description
1	alinkColor Deprecated − A string that specifies the color of activated links. Ex − document.alinkColor
2	anchors[ ] An array of Anchor objects, one for each anchor that appears in the document Ex − document.anchors[0], document.anchors[1] and so on
3	applets[ ] An array of Applet objects, one for each applet that appears in the document Ex − document.applets[0], document.applets[1] and so on
4	bgColor Deprecated − A string that specifies the background color of the document. Ex − document.bgColor
5	cookie A string-valued property with special behavior that allows the cookies associated with this document to be queried and set. Ex − document.cookie
6	domain A string that specifies the Internet domain the document is from. Used for security purpose. Ex − document.domain
7	embeds[ ] An array of objects that represent data embedded in the document with the <embed> tag. A synonym for plugins[ ]. Some plugins and ActiveX controls can be controlled with JavaScript code. Ex − document.embeds[0], document.embeds[1] and so on
8	fgColor Deprecated - A string that specifies the default text color for the document Ex − document.fgColor
9	forms[ ] An array of Form objects, one for each HTML form that appears in the document. Ex − document.forms[0], document.forms[1] and so on
10	images[ ] An array of Image objects, one for each image that is embedded in the document with the HTML <img> tag. Ex − document.images[0], document.images[1] and so on
11	lastModified A read-only string that specifies the date of the most recent change to the document Ex − document.lastModified
12	linkColor Deprecated − A string that specifies the color of unvisited links Ex − document.linkColor
13	links[ ] It is a document link array. Ex − document.links[0], document.links[1] and so on
14	location The URL of the document. Deprecated in favor of the URL property. Ex − document.location
15	plugins[ ] A synonym for the embeds[ ] Ex − document.plugins[0], document.plugins[1] and so on
16	Referrer A read-only string that contains the URL of the document, if any, from which the current document was linked. Ex − document.referrer
17	Title The text contents of the <title> tag. Ex − document.title
18	URL A read-only string that specifies the URL of the document. Ex − document.URL
19	vlinkColor Deprecated − A string that specifies the color of visited links. Ex − document.vlinkColor

Document Methods in Legacy DOM

Here is a list of methods supported by Legacy DOM.

Sr.No.	Property & Description
1	clear( ) Deprecated − Erases the contents of the document and returns nothing. Ex − document.clear( )
2	close( ) Closes a document stream opened with the open( ) method and returns nothing. Ex − document.close( )
3	open( ) Deletes existing document content and opens a stream to which new document contents may be written. Returns nothing. Ex − document.open( )
4	write( value, ...) Inserts the specified string or strings into the document currently being parsed or appends to document opened with open( ). Returns nothing. Ex − document.write( value, ...)
5	writeln( value, ...) Identical to write( ), except that it appends a newline character to the output. Returns nothing. Ex − document.writeln( value, ...)

2. The W3C DOM − 

This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.

The W3C DOM standardizes most of the features of the legacy DOM and adds new ones as well. In addition to supporting forms[ ], images[ ], and other array properties of the Document object, it defines methods that allow scripts to access and manipulate any document element and not just special-purpose elements like forms and images.

Document Properties in W3C DOM

This model supports all the properties available in Legacy DOM. Additionally, here is a list of document properties which can be accessed using W3C DOM.

Sr.No.	Property & Description
1	body A reference to the Element object that represents the <body> tag of this document. Ex − document.body
2	defaultView Its Read-only property and represents the window in which the document is displayed. Ex − document.defaultView
3	documentElement A read-only reference to the <html> tag of the document. Ex − document.documentElement8/31/2008
4	implementation It is a read-only property and represents the DOMImplementation object that represents the implementation that created this document. Ex − document.implementation

Document Methods in W3C DOM

This model supports all the methods available in Legacy DOM. Additionally, here is a list of methods supported by W3C DOM.

Sr.No.	Property & Description
1	createAttribute( name) Returns a newly-created Attr node with the specified name. Ex − document.createAttribute( name)
2	createComment( text) Creates and returns a new Comment node containing the specified text. Ex − document.createComment( text)
3	createDocumentFragment( ) Creates and returns an empty DocumentFragment node. Ex − document.createDocumentFragment( )
4	createElement( tagName) Creates and returns a new Element node with the specified tag name. Ex − document.createElement( tagName)
5	createTextNode( text) Creates and returns a new Text node that contains the specified text. Ex − document.createTextNode( text)
6	getElementById( id) Returns the Element of this document that has the specified value for its id attribute, or null if no such Element exists in the document. Ex − document.getElementById( id)
7	getElementsByName( name) Returns an array of nodes of all elements in the document that have a specified value for their name attribute. If no such elements are found, returns a zero-length array. Ex − document.getElementsByName( name)
8	getElementsByTagName( tagname) Returns an array of all Element nodes in this document that have the specified tag name. The Element nodes appear in the returned array in the same order they appear in the document source. Ex − document.getElementsByTagName( tagname)
9	importNode( importedNode, deep) Creates and returns a copy of a node from some other document that is suitable for insertion into this document. If the deep argument is true, it recursively copies the children of the node too. Supported in DOM Version 2 Ex − document.importNode( importedNode, deep)

3. The IE4 DOM − 

This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features.

1. Document Properties in IE 4 DOM

   The following non-standard (and non-portable) properties are defined by Internet Explorer 4 and later versions.

   Sr.No.	Property & Description
   1	activeElement A read-only property that refers to the input element that is currently active (i.e., has the input focus). Ex − document.activeElement
   2	all[ ] An array of all Element objects within the document. This array may be indexed numerically to access elements in source order, or it may be indexed by element id or name. Ex − document.all[ ]
   3	charset The character set of the document. Ex − document.charset
   4	children[ ] An array that contains the HTML elements that are the direct children of the document. Note that this is different from the all [ ] array that contains all the elements in the document, regardless of their position in the containment hierarchy. Ex − document.children[ ]
   5	defaultCharset The default character set of the document. Ex − document.defaultCharset
   6	expando This property, if set to false, prevents client-side objects from being expanded. Ex − document.expando
   7	parentWindow The window that contains the document. Ex − document.parentWindow
   8	readyState Specifies the loading status of a document. It has one of the following four string values − Ex − document.readyState
   9	uninitialized The document has not started loading. Ex − document.uninitialized
   10	loading The document is loading. Ex − document.loading
   11	interactive The document has loaded sufficiently for the user to interact with it. Ex − document.interactive
   12	complete The document is completely loaded. Ex − document.complete

   Document Methods in IE4 DOM

   This model supports all the methods available in Legacy DOM. Additionally, here is the list of methods supported by IE4 DOM −

   Sr.No.	Property & Description
   1	elementFromPoint(x,y) Returns the Element located at a specified point. Example: document.elementFromPoint(x,y)