Inside Technique : W3C DOM Table of Contents : Building the TOC

We are now going to process each header and iteratively build the table of content as an HTML list (UL). To create the list container and each table of contents entry, we use the createElement() method. As we build each entry, we will append it to the end of the list. When we are finished scanning the document we will have a complete table of contents:

function getHeaders() {
 var obj = document.getElementsByTagName("*")
 var el = document.createElement("UL")
 var tagList = "H1;H2;H3;H4;H5;H6;"
 for (var i=0;i=0) {
   var eLI = document.createElement("LI")
   // Assign the text - more on this soon
   var eLIText = document.createTextNode(getTextForElement(obj[i]))
   eLI.className="toc" + obj[i].tagName
   eLI.appendChild(eLIText)
   el.appendChild(eLI)
  }
 return el
}


function ie_getElementsByTagName(str) {
 if (str=="*")
  return document.all
 else
  return document.all.tags(str)
}

if (document.all)
 document.getElementsByTagName = ie_getElementsByTagName

function doLoad() {
 var el= getHeaders()
}

window.onload =doLoad

We are almost there. While this script visits each element we left out one very important function, getTextForElement() that extracts the text from each header element and the code that inserts the table of contents into the document. With the Internet Explorer object model, accessing the contents is very simple using the innerText property on the element. The W3C model exposes no such property. To make matters more difficult, they expose each fragment of text as separate objects in the tree. While this approach is useful for some scenarios, it makes simple text retrieval much more difficult. Next we explain how text nodes work and a recursive function for retrieving the content inside of an element.

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