JavaScript Document Object Model (DOM)

The Document Object Model (DOM) provides a way to access and alter the contents of Hypertext Markup Language (HTML) documents. The DOM represents HTML documents in an uprooted tree-like structure because the root of the tree is on top.

For example, consider the HTML document:

<!doctype html>
<title>Hello World</title>
<p>Here's some text.</p>
<p>Here's more text.</p>
<p>Link to the <a href="">W3</a></p>

The HTML when viewed in the tree structure of the DOM is like:

Many HTML elements can have attributes, such as the href attribute of the <a> element. You can both retrieve and set the attributes using the DOM.

Working with nodes

The elements within the tree structure are referred to as nodes or node objects. Nodes at the level below a given node are known as children. For example, the <body> node has three child nodes, all <p> elements, and one of the <p> elements has a child of its own, an <a> element. The <body> node is said to be a parent of the <p> nodes. Any nodes under a given node are known as descendants of that node. The three <p> nodes are known as siblings because they are on the same level.

Retrieving elements

Two primary methods to retrieve elements are: getElementById() and getElementsByTagName(). 

1. Retrieving elements by ID

The getElementById() method retrieves a specified element of the HTML document and returns a reference to it. To retrieve an element, it must have an id attribute. For example, for HTML:

<p id="sometext">Here's some text.</p>

You can retrieve the <p> elements like:

var p1 = document.getElementById("sometext");

2. Retrieving by tag name

When you need to retrieve more than one element at a time, you might find the getElementsByTagName() method to be more appropriate. It returns all the elements of the specified tag type in an array or in a list format. For example, to retrieve all the images (<img> tags) in a document,

var images = document.getElementsByTagName("img");

Then, you can examine the properties of the <img> elements stored in the images variable by looping through them.

For example, following code changes the background color of each <td> element within the table when the user clicks the Click To Change Colors link.

function changecolors() {
var a1 = document.getElementsByTagName("td");
var a1Length = a1.length;
for (var i = 0; i < a1Length; i++) {
a1[i].style.background = "#aaabba";

For the link:

<a href="#" onclick="return changecolors();">Click to Change Colors</a>

That function retrieves all <td> elements by using the getElementsByTagName() method, placing them into the a1 array. Then, the code enumerates this array using a for loop, starting at element 0, and continuing to the end of the array. It uses the a1Length variable, which obtained the length of the a1 array in the line preceding the for loop.

Working with siblings

JavaScript contains methods and properties for working with the parent, child and sibling relationship of an HTML document. For example, the childNodes property contains a group of nodes comprising the children of the given element. For example, to retrieves the first child and places it into the childOne variable:

var childOne = document.getElementById("mydiv").childNodes[0];

Just as the parent node can have one or more children, each child has a parent node, which you retrieve using its parentNode property. You can iterate through a set of child nodes using the their nextSibling and previousSibling properties. If there are no more siblings, the property returns null. For example, the previousSibling property returns null when used on the first child, and the nextSibling property returns null when used on the last child.

Finally, the firstChild and lastChild properties contain the first child (childNodes[0]) and last child of a given element, respectively. When an element contains no children, these properties are both null.

In jQuery, the children() function returns the children of the matched element, while the next() and prev() functions return the next sibling and previous sibling, respectively. The parent() function returns the parent.

Viewing attributes

Sometimes, you might not know what attributes are available for a given element. Here is a generic function that displays all the attributes of a given element: 

function showattribs(e) {
var e = document.getElementById("brainlink");
var elemList = "";
for (var element in e) {
var attrib = e.getAttribute(element);
elemList = elemList + element + ": " + attrib + "\n";

Setting attributes

The getAttribute() method is used to retrieve the values of attributes. You can also set attribute values using the setAttribute() method. The setAttribute() method takes two arguments or parameters: the name of the attribute you want to change and the intended value for that attribute. 

Creating elements

You can add elements to a document using the DOM. The createElement() method of the document object creates or adds an element to a document. For example,

var newelement = document.createElement("p");

The variable newelement now has a reference to the new element. To make the element visible, you need to append the element to the document, although usually only after adding text to it. You add an element to a document using the appendChild() method, as:


You can append a text node to the <p> element, as:

newelement.appendChild(document.createTextNode("Hello World"));

Deleting elements

You can remove nodes from a document by using the removeChild() method. For example,

var removeel = document.getElementById("element1");