Document Object Model

The Document Object Model (DOM) is a W3C standard that is a platform- and language-neutral interface which allows programs and scripts to dynamically access and update the content, structure and presentation of documents. Web browsers use the model to render HTML documents. The DOM is also required by JavaScript scripts to interact with a web page dynamically.

The DOM is consisted of 3 different parts:

Core DOM - standard model for any structured document
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents

The HTML DOM is a model that defines the objects and properties of all HTML document elements, and the methods to access them. Every object is a node, and the HTML DOM is a standard for how to get, modify, add, or delete the nodes.

Nodes

In the HTML DOM,

The entire document is a document node.
Every HTML element is an element node.
The text in the HTML elements is a text node.
Every HTML attribute is an attribute node.

For instance the following HTML structure has the and the as two element nodes and the "This text is inde a paragraph." as a content node.

<p align="center">This text is inside a <b>paragraph</b>.</p>

Node Tree

The HTML DOM views an HTML document as a hierarchical tree-structure. The tree structure is called a node tree. In a node tree:

Te top node is called the root node.
Every node, except the root, has exactly one parent node.
A node can have any number of children node.
A leaf node is a node with no children.
Sibling nodes are nodes with the same parent.

In the previouse example, the is the parent node, while the "This text is inde a paragraph." and the are the two child nodes. At the same time the "This text is inde a paragraph." and the are sibling nodes to each other. Finally, the itself is another parent node with the "paragraph" as its child node.

Document Object Collections

Collection	Description
anchors[]	Returns an array of all the anchors in the document
forms[]	Returns an array of all the forms in the document
images[]	Returns an array of all the images in the document
links[]	Returns an array of all the links in the document

Document Object Properties

Property	Description
cookie	Returns all name/value pairs of cookies in the document
documentMode	Returns the mode used by the browser to render the document
domain	Returns the domain name of the server that loaded the document
lastModified	Returns the date and time the document was last modified
readyState	Returns the (loading) status of the document
referrer	Returns the URL of the document that loaded the current document
title	Sets or returns the title of the document
URL	Returns the full URL of the document

Document Object Methods

Method	Description
close()	Closes the output stream previously opened with document.open()
getElementById()	Accesses the first element with the specified id
getElementsByName()	Accesses all elements with a specified name
getElementsByTagName()	Accesses all elements with a specified tagname
open()	Opens an output stream to collect the output from document.write() or document.writeln()
write()	Writes HTML expressions or JavaScript code to a document
writeln()	Same as write(), but adds a newline character after each statement

DOM and Javascript

Assume that an HTML element has been stored in the variable x:

DOM Properties:

x.innerHTML - the text value of x
x.nodeName - the node name (tag name) of x
x.nodeValue - the node value of x
x.parentNode - the parent node of x
x.childNodes - the child nodes of x
x.attributes - the attributes nodes of x

DOM Methods:

x.getElementById(id) - get the element with a specified id
x.getElementsByTagName(name) - get all elements with a specified tag name
x.appendChild(node) - insert a child node to x

x.removeChild(node) - remove a child node from x

DOM Events

Attribute	Action
onblur	An element loses focus
onchange	The content of a field changes
onclick	Mouse clicks an object
ondblclick	Mouse double-clicks an object
onerror	An error occurs when loading a document or an image
onfocus	An element gets focus
onkeydown	A keyboard key is pressed
onkeypress	A keyboard key is pressed or held down
onkeyup	A keyboard key is released
onmousedown	A mouse button is pressed
onmousemove	The mouse is moved
onmouseout	The mouse is moved off an element
onmouseover	The mouse is moved over an element
onmouseup	A mouse button is released
onresize	A window or frame is resized
onselect	Text is selected
onunload	The user exits the page

DOM Reference

JavaScript and HTML DOM Reference