Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. There is a standard set of objects for representing HTML and XML documents and a standard interface for accessing and manipulating them. The DOM has different parts (Core, HTML, XML). There are also different levels (0/1/2/3).
An HTML document is viewed as a tree in DOM with elements embedded in elements. The elements are the nodes in the tree. By traversing this tree one could access, modify, or delete elements and their contents. When JavaScript accesses an HTML document, it treats the elements of the document as objects that have both attributes (data or properties) and methods (operations or functions). Objects can respond to events.
The document object is used to reference other objects (elements) in the HTML document. For example document.body allows you to access the body object. Since there is only one body there is no ambiguity. However, if there is more than one element of a given type say form then any given form is accessed through an array called forms. For example document.forms[0].elements[0] refers to the first element in the first form.
There are other ways of referencing different elements of an HTML document. The method getElementsByTagName() returns an array of references to those elements corresponding to those tags: document.getElementsByTagName("p"). You now have an array with the references to all the paragraphs in the document.
You could also give the HTML element a name like so:
<form name = "someForm" method = "post" action = "" >Then document.someForm lets you access the elements in the form. Caveat: XHTML 1.1 does not recognize the name attribute. However, it does allow unique ids. You could have a unique id for the form:
<form id = "someForm" method = "post" action = "" >Obtain a reference to the form document.getElementById("someForm") and then access its elements. Unfortunately, IE 6 and older browsers do not recognize the getElementById() method.
An event object is generated when something happens - the document gets loaded, the user clicks a mouse button, etc. The event handler is the script that is executed in response to that event. Event handlers are registered with the elements that are the source of the event. The following table gives list of events and the tag attribute associated with the event.
| Event | Tag Attribute | Tag | Description |
|---|---|---|---|
| blur | onblur | <a> | Link loses input focus |
| <button> | Button loses input focus | ||
| <input> | Input loses input focus | ||
| <textarea> | Text area loses input focus | ||
| <select> | List element loses input focus | ||
| change | onchange | <input> | Input element is changed and loses input focus |
| <textarea> | Text area is changed and loses input focus | ||
| <select> | List item is changed and loses input focus | ||
| click | onclick | <a> | Link is clicked |
| <input> | Input element is clicked | ||
| focus | onfocus | <a> | Link gets input focus |
| <input> | Input element gets input focus | ||
| <textarea> | Text area gets input focus | ||
| <select> | List item gets input focus | ||
| load | onload | <body> | After document is finished loading |
| mousedown | onmousedown | most elements | User presses down the left mouse button |
| mousemove | onmousemove | most elements | User moves cursor with mouse on element |
| mouseout | onmouseout | most elements | User moves cursor with mouse away from element |
| mouseover | onmouseover | most elements | User moves cursor with mouse over element |
| select | onselect | <input> | Mouse cursor is moved over input element |
| <textarea> | Portion of the text area is selected | ||
| submit | onsubmit | <form> | Submit button is pressed |
| unload | onunload | <body> | User exits document |
The syntax for registering an event handler is
<input type = "button" name = "btn" onclick = "btnHandler();" />
Here are some JavaScript Applications that make use of the DOM.