Basics of DOM

Document Object Model abbriveated as DOM is the single most important API that sits under the hood of every webpage. It is the mechanics of your webpage. To understand what it is and how to work with it lets look at a simple html page with  a body and two div tags

The above code is rendered as shown belowBut when the page is loaded in to a browser, the broswer creates the following structure as its internal representationDOM Structure

Each of the box in the above tree representation is called as a node or element. Every node is a JavaScript DOM object. This internal representation is the bread and butter to manipulate the structure of the webpage and to provide webpage interactivity. It helps the developer to access the contents of the webpage and manipulate them. We shall see in the following section exactly how we do this. Interactivity to a webpage is achieved in two steps

  1. Selecting the node
  2. Manipulating the selected node using its properties and methods

DOM NODE SELECTION

Each node in the above tree can be accessed in three ways using JavaScript supported functions.

  1. document.getElementById
  2. document.getElementsByTagName
  3. document.getElementsByClassName
First method takes id of an element as a string and returns the DOM Object  of the element corresponding with that id. This function returns only one element because id is considered to be unique for every element.
The usage is as shown below
var div = document.getElementById("div1"); //return DOM object for element with id 'div1'
console.log(div); //output the html node
the output in chrome inspector 
The other two methods take tag name , class name respectively. They return an array of nodes matching the tag or class name. The usage is as shown below
var div = document.getElementsByTagName("div"); //select all div tags
console.log(div); //output the array

output in chrome inspector

now the output has two div tags in the array.

DOM TREE TERMINOLOGY

Assume we have selected the first div node then the following picture illustrates the terminology used and the respective DOM properties to access the depicted nodes

DOM TREE NAVIGATION

Using the following properties we can navigate the entire DOM tree

DOM Property Description Examples
firstChild/firstElementChild First child node descending the selected node if your html tags are interleaved with newlines as shown in the code then firstChild may return Text Node corresponding to that new line, so in that case instead of firstChild use firstElementChild
lastChild/lastElementChild Last child node descending the selected node
parentNode Parent of the selected node
nextSibling/nextElementSibling Node that is to the right of the selected node
previousSibling/previousElementSibling Node that is to the left of the selected node
innerText Returns the text side the selected node. If node contains any other html nodes, the returned text contains only text exclusing those tags So for <div> text1 <i>  itext </i> text2 </div> the returned text is “text1 itext text2”
innerHTML Returns the HTML code inside the selected node So for <div> text1 <i>  itext </i> text2 </div> the returned text is “text1 <i>itext</i> text2”

example, say we have selected the first div node then

var div = document.getElementById(&quot;div1&quot;);
var parentNode = div.parentNode; // this returns the dom reference to body tag

METHODS TO MANIPULATE NODE ATTRIBUTES

The following methods are used to manipulate the attribute of each node( HTML attributes )

DOM Method Description
getAttribute Returns the attribute value of the given attribute of the selected node
setAttribute Sets the attribute value of the given attribute of the selected node
removeAttribute Removes the specified attribute of the selected node

METHODS TO MANIPULATE NODES

The following methods are used to manipulate the nodes. Like creating new nodes, deleting existing onces in the DOM Tree etc

DOM Method Description
createTextNode Creates a DOM Text Node
insertBefore Inserts before the given node(not selected node)
appendChild Inserts as a last child node to the selected node
removeChild Deletes the node from the DOM Tree

This article is by no means comprehensive, To get a better understanding of above concepts refer

  1. JavaScript Definitive Guide – David Flanagan
  2. Mozilla Developer Network
  3. DOM Reference

Leave a comment

Leave a Reply