Inside Technique : W3C DOM Table of Contents : Finding an Element's Contents

Unfortunately the W3C recommendation does not include any easy to use property or function for obtaining the contents of an element. Instead, the contents are buried beneath a text node object. For example, take the following simple HTML:

<P>This is a <EM>sample</EM> paragraph</P>

In the Internet Explorer model, the contents of this paragraph can be retrieved using the innerText property of the P element. The W3C recommendation instead requires you to manipulate each piece of text as a separate object. The above HTML fragment is exposed as a tree of objects:

Element Object (P)
  |
  +--TextNode Object (This is a)
  |
  +--Element Object (EM)
  |      |
  |      +-- TextNode Object (sample)
  |
  +--TextNode Object(paragraph)

To retrieve the contents of this paragraph you need to traverse the object hierarchy and extract the text in each text-node object. We wrote a recursive function, getTextForElement(), that walks the object hierarchy for an element and returns the content:

function getTextForElement(obj) {
 var str=""
 for (var i=0;i < obj.childNodes.length;i++) {
  if (obj.childNodes[i].nodeType==1) 
   // Element node - walk children
   str+=getTextForElement(obj.childNodes[i])
  else if (obj.childNodes[i].nodeType==3)
   // Text Node - extract contents
   str = obj.childNodes[i].data
 }
 return str	
}

The last step is to insert the table of contents into the document. The getHeaders() function returns a tree of objects representing the table of contents list. To insert this tree into the document, we use the insertBefore() method. We use this method to insert the table of contents as the first child of the document's body. Below is the final doLoad() function that is called after the page loads.

function doLoad() {
 var el = getHeaders()
 var startEl = document.getElementsByTagName("BODY")[0]
 startEl.insertBefore(el,startEl.childNodes[0])
}

On the last page, we provide the complete script for generating the table of contents. The table of contents created by this article is not interactive. You can't click on an entry and navigate to the element. We will explain how to make this table of contents interactive next week. Stay tuned!

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.