Tutorial on DOM : Learn the basics of DOM

The Document Object Model (DOM) is the model that describes how all the Elements/Tags/ Selectors in an HTML / XML page, are placed as a TREE structure or hierarchical structure, inside the document. How each DOM elements can be accessed and manipulated.  In this tutorial you will learn the basics of DOM object model.

W3C DOM -Introduction

1. Nodes : In DOM Level 1, each object / tag, is a Node.<P>This is a simple paragraph with two nodes, the text between the P tag is TEXT node inside P node</P>

   Here 2 nodes exists. An element node of paragraph type(P), another is TEXT node which is the child of P node as shown below.

   <p> => An element node P is created
   |
   |
   Text Node => "This is a simple paragraph ....."
   

   <P>This is a <STRONG>strong text</STRONG></P>

   Here the element P has two children: (1) Text node (2) STRONG node

   The STRONG node has a child TEXT node of value “strong text”.

3. Reference Reading : nodes
4. Access a DOM element like <P> tag : getElementsByTagname  :By the method document.getElementsByTagName(‘B’) you can construct an array of all tags B in the document. To access the 1st <B> tag in the document, use JS code

   var x = document.getElementsByTagName('B')[0]