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.
- 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”.
- Reference Reading : nodes
- 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')