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:
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.


In the HTML DOM, For instance the following HTML structure has the <p> and the <b> 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:  In the previouse example, the <p> is the parent node, while the "This text is inde a paragraph." and the <b> are the two child nodes. At the same time the "This text is inde a paragraph." and the <b> are sibling nodes to each other. Finally, the <b> 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
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 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