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


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.


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


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


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


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

Using Chrome’s web inspector as a calculator

chromeEvery version of chrome comes with a built in JavaScript inspector(activated by pressing Shift+Ctrl+J ). This is basically a debugger for your web application. It has pretty much everything that a normal debugger has for other languages like C, Java. So in this post I will show you how to use this inspector as general purpose calculator.
Once you open the inspector click on console tab to get an interactive prompt with > symbol. This is a full featured JavaScript interpreter, So the possibility of playing with this prompt are endless. But lets constrain our self to using it as a basic calculator(In a future post I will demonstrate more advanced uses).

First, doing basic arithmetic operations as shown below

Next, lets try converting a number from decimal to different bases (that ‘var n’ statement is required). The ‘toString(base)’ method can be invoked on any number and it takes the parameter base to which the actual number should be converted. In the first case it is evident that I am converting from decimal to binary format, then to octal and hexadecimal.

Next, Converting from other bases to decimal. The ‘parseInt(string,base)’ method takes a number in string format and converts it to the specified base 

Next, Converting from one base to other is a two step process

  1. convert from <any> base to decimal using parseInt method
  2. convert from decimal to <any> other base

Taking it a step further, we can type any valid JavaScript program at the prompt. Hope this is the start of your JavaScript journey!!