Home Page -> DOM Tutorials -> Dynamic Text -> Review of Nodes

Review of Nodes

As we saw in the previous tutorial, when CSS-compliant browsers read an HTML file, they analyze its structure and create a structure of nodes which you can manipulate. The HTML at the right produces the structure shown below. You can move your mouse around the picture to see the relationships between the nodes below right. 
<body>
<p>
   First Text
   <img src="picture.png">
   <i>More Text</i>
</p>
</body>
tree diagram of HTML

Move over the picture to see information about each node.

Node:
Parent:
First Child:
Last Child:
Previous Sibling:
Next Sibling:

In the previous tutorial, we only read information from our document's tree in order to find out which <span> had been clicked. Now we're going to modify the document structure on the fly.

  The Dynamic <div> Index Modifying a Node