Document Object Model (DOM) API for JavaScript

Document Object Model (DOM), is a standard API that allows

programmers to access and manipulate the contents of an
HTML/XHTML/XML document dynamically inside their program. It
models an HTML/XHTML/XML document as an object-oriented, tree-
like structure, known as a DOM-tree, consisting of nodes resembling the
tags (elements) and contents. DOM also provides an interface for event
handling, allowing you to respond to user's or browser's action.
DOM API is implemented in many languages such as Java, JavaScript,
Perl, and ActiveX. DOM API specification is maintained by W3C.
DOM has various levels:
Levels of DOM:
1. Level 0: Provides low-level set of interfaces.
2. Level 1: DOM level 1 can be described in two
parts: CORE and HTML.
 CORE provides a low-level interfaces that can be used to
represent any structured document.
 HTML provides high-level interfaces that can be used to
represent HTML document.
3. Level 2 : consists of six
specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERS
AL and RANGE.
 CORE2: extends functionality of CORE specified by DOM
level 1.
 VIEWS: views allows programs to dynamically access and
manipulate content of document.
 EVENTS: Events are scripts that is either executed by
browser when user reacts to web page.
 STYLE: allows programs to dynamically access and
manipulate content of style sheets.
  TRAVERSAL: allows programs to dynamically traverse the
document.
 RANGE: allows programs to dynamically identify a range of
content in document.
4. Level 3: consists of five different specifications: CORE3, LOAD
and SAVE, VALIDATION, EVENTS, and XPATH.
 CORE3: extends functionality of CORE specified by DOM
level 2.
 LOAD and SAVE: allows program to dynamically load the
content of XML document into DOM document and save
the DOM Document into XML document by serialization.
 VALIDATION: allows program to dynamically update the
content and structure of document while ensuring document
remains valid.
 EVENTS: extends functionality of Events specified by DOM
Level 2.
 XPATH: XPATH is a path language that can be used to
access DOM tree.

Finding and Selecting Elements

In JavaScript, we often use DOM API to select elements within the

current document, so as to access or manipulate their contents. The most
commonly-used functions are:
Descripti
Function Example
on

document.getElementById(a Returns the <input type="text"

nId) element id="foo">
with the var elm =
document.getElementByI
given
d("foo");
unique id. var input = elm.value;
document.getElementsByTag Returns an <input type="text">
Name(aTagName) array of var elms =
elements document.getElementBy
TagName("input");
with the
var input =
given tag elms[0].value;
name.

document.getElementsByCla Returns an <input type="text"

ssName(aClassName) array of class="bar">
elements var elms =
document.getElementBy
with the
ClassName("bar");
given class var input =
attribute elms[0].value;
name.

document.getElementsByNa Returns an <input type="checkbox"

me(aName) array of name="gender"
elements value="m">Male
<input type="checkbox"
with the
name="gender"
given name value="f">Female
attribute. var x =
document.getElementsBy
Name("gender");
for (var i = 0; i <
x.length; ++i) {
if (x[i].checked) {
value = x[i].value;
break;
}
}
You can use wildcard * in document.getElementsByTagName("*") to
select all the elements, e.g.,
var elms = document.getElementsByTagName("*");
for (var i = 0; i < elms.length; i++) {
console.log(elms[i].value);
}
The above functions select element(s) based on the
unique id, name attribue and tag-name. HTML 5 further defines two
function that can select elements based on class attribute (which is used
extensively by CSS in the class-selector):

DOM Tree & Nodes

When a browser loads an HTML page, it builds DOM models a web
page in a hierarchical tree-like structure composing of nodes, resembling
its HTML structure. An example of an HTML document with the
corresponding DOM-tree is given follow. Take note that the text content
of an element is stored in a separate Text node.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOM Tree</title>
</head>
<body>
<h2 onmouseover="this.style.color='red'"
onmouseout="this.style.color=''">Testing</h2>
<p>welcome to <i>JavaScript</i>...</p>
</body>
</html>
Load the web page onto Firefox, and use the firebug to inspect the DOM
tree.
A DOM-tree comprises the following types of nodes:
1. Document Node: the root node representing the entire HMTL
document.
2. Element node: represents an HTML element (or tag). An element
node may have child nodes, which can be either element or text
node. Element node may also have attributes.
3. Text Node: contains the text content of an element.
4. Others: such as comment, attribute.
A DOM node has these properties:
 nodeName: contain the name of the node, which is read-only.
The nodeName for an Element node is the tag-name; nodeName for
 the Document node is #document; nodeName for Text nodes
is #text.
 nodeValue: contain the value of the node. nodeValue for Text node
is the text contained; nodeValue for Element node is undefined.
 nodeType: an integer indicating the type of the node, e.g., Element
(1), Attribute (2), Text (3), Comment (8), Document (9).
 parentNode: reference to parent node. There is only one parent node
in a tree structure.
 childNodes: array (or node-list) of child nodes.
 firstChild, lastChild: reference to the first and last child node.
 prevSibling, nextSibling: reference to the previous and next sibling
in the same level.
Take note of the difference between singular and plural terms. For
example, parentNode refer to the parent node (each node except root has
one and only one parent node), childNodes holds an array of all the
children nodes.
The root node of the DOM tree is called document. The root
node document has only one child, called document.documentElement,
representing the <html> tag, and it acts as the parent for two child nodes
representing <head> and <body> tags, which in turn will have other
child nodes. You can also use a special property
called document.body to access the <body> tag directly.
For example, you can use the following node property to access the Text
node "Welcome to " in the above example:
document.documentElement.lastChild.childNodes[1].firstChild.nodeV
alue; // "Welcome to "
document.body.lastChild.firstChild.nodeValue; // same
as above

Example
The following JavaScript lists all the nodes in the <body> section, in a
depth-first search manner, via a recursive function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOM Tree</title>
<script>
function printNode(node) {
document.writeln("Node name=" + node.nodeName + ", value=" +
node.nodeValue + ", type=" + node.nodeType + "<br>");
if (node.hasChildNodes()) {
var childs = node.childNodes;
for (var i = 0; i < childs.length; i++) {
printNode(childs[i]);
}
}
}
</script>
</head>
<body onload="printNode(document.body)"><h2
onmouseover="this.style.color='red'"
onmouseout="this.style.color=''">Testing</h2><p>welcome to
<i>JavaScript</i>...</p></body>
</html>
Node name=BODY, value=null, type=1
Node name=H2, value=null, type=1
Node name=#text, value=Testing, type=3
Node name=P, value=null, type=1
Node name=#text, value=welcome to , type=3
Node name=I, value=null, type=1
Node name=#text, value=JavaScript, type=3
Node name=#text, value=..., type=3
Accessing the HTML element via Node interface may not be too useful
nor practical for JavaScript applications, as you need to know the actual
topological structure of the DOM-tree. Furthermore, some browsers
(e.g., firefox) may create extra Text nodes to contain the white spaces
between tags.

Text Node
DOM models the texts enclosed by HTML tags as a separate text node.
It cannot have child node. To retrieve the text content, you could the
property nodeValue. For example,
<p id="magic">Hello</p>
......
console.log(document.getElementById("magic").firstChild.nodeValue
);
document.getElementById("magic").firstChild.nodeValue = "Hi"; //
text change to "Hi"

Attribute Properties
To access an attribute of an Element node called elementName, you
could either use:
 property elementName.attributeName, where attributeName is the
name of the attribute, or
 methods elementName.getAttribute(name) and elementName.setAttri
bute(name, value).
For example,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <title>Test Attributes</title>
</head>
<body>
<p id="magic1" align="left">Hello</p>
<p id="magic2" align="center">Hello, again.</p>

<script type=text/javascript>
var node = document.getElementById("magic1");
document.writeln(node.align); // Get attribute "align"
node.align = "center"; // Set attribute "align" to a new value

node = document.getElementById("magic2");
document.writeln(node.getAttribute("align")); // Read attribute
"align"
node.setAttribute("align", "right"); // Write attribute "align"
</script>
</body>
</html>
Attribute style (for CSS)
Element has a property called style, which models CSS style with CSS
properties such as color and textAlign. For example,
<p id="magic">Hello</p>
......
document.getElementById("magic1").style.color="green";
document.getElementById("magic1").style.textAlign="right";

The document object

The document object is the root node of the DOM-tree. It can be used to
access all the elements in an HTML page.
It contains these properties:
 documentElement, body, title: references
the <html>, <body> and <title> tags respectively.
 lastModified, referrer, cookie, domain: information retrieved from
the HTTP response header.
 form[], applets[], images[], embeds[], links[], anchors[]: Arrays
containing the respective HTML elements (backward compatible
with DOM0).
The document object has the following methods:
 write(string), writeln(string): Write the specified string to the current
document. writeln() (write-line) writes a newline after the string,
while write() does not. Take note that browser ignores newlines in an
HTML document, you need to write a <br> or <p>...</p> tag for the
browser to display a line break.
 clear(): Clear the document.
 open(), close(): Open/close the document stream.
 getElementById(), getElementsByName(), getElementsByTagName
(): Select HTML element(s) by id, name, or tag-name, respectively.

Event Handling in HTML DOM

JavaScripts are often event-driven. That is, a piece of codes (called event
handler) fire in response to a certain user's or browser's action, such as
clicking a button, enter some texts, or loaded a page.
DOM API provides methods for capturing events so you can perform
your own actions in response to them. It also provides an Event object
which contains information specific to a given event that can be used by
your event handler.
 Built-in Events and Event Handlers

JavaScript supports many types of events, as tabulated below. Certain

events such as click are applicable to all the HTML elements; certain
event such as load and unload are applicable to a selected group of tags.
Event Event HTML
Description
Name Handler Element

click onclick User clicks on the

component.

submit onsubmit User clicks the <form>, <input

"submit" button. type="submit">

reset onreset User clicks the <form>, <input

"reset" button. type="reset">

select onselect User selects text in <textarea>,

a text box or text <input
area. type="text">

keypress onkeypress User holds down a document,

key. image, link,
textarea

keydown onkeydown User

keyup onkeyup presses/releases a
key.

mousedown onmousedown User button,

mouseup onmouseup presses/releases a document, link
mouse button.

mouseover onmouseover User moves the

mouseout onmouseout mouse pointer
at/away from a link
or hot spot.

mousemove onmousemove User moves the

mouse pointer

load onload When the page is <body>,

loaded into the <frameset>,
window. <img>

unload onunload When another page <body>,

is about to be <frameset>
loaded.

blur onblur When a particular

form element
losses focus.
E.g., after the
element is selected,
and the user clicks
somewhere or hit
the tag key.

change onchange Same as onblur,

but the elements
 must be changed.

focus onfocus Same as onblur,

but the element
gains focus.

drapdrop ondrapdrop User drags and window

drops something
(e.g., a file) onto
the navigator
window.

move onmove User moves/resizes window, frame

resize onresize the window

abort onabort Users stops or <img>

aborts an image
from loading.

error onerror When a JavaScript <img>

or image error
occurs while
loading a
document or an
image.
JavaScript Built-in Browser
Objects: navigator, window, screen, history, location
The navigator object
The built-in navigator object represents the browser. It contains the
following properties related to the browser:
 platform: Operating system.
 appName, appCodeName, appVersion, appUserAgent: Identified the
browser.
 language, plugin, mimeTypes: options or features supported by the
browser.
 others.

The window object

The window object represents an open window in a browser. It is
the top-level object in the JavaScript hierarchy. All top-level properties
and methods such as alert(), prompt(), parseInt() belongs to
the window object. The window object is also the default object. That
is, alert() is the same as window.alert(). A window object is created
automatically with every <body> or <frameset> tag.