Inside Technique : Part II - W3C DOM Table of Contents : The Script

The Code

// Copyright 1999 InsideDHTML.com, LLC. All rights reserved.
function getTextForElement(obj) {
 var str=""
 for (var i=0;i < obj.childNodes.length;i++) {
  if (obj.childNodes[i].nodeType==1)
   str+=getTextForElement(obj.childNodes[i])
  else if (obj.childNodes[i].nodeType==3)
   str = obj.childNodes[i].data
 }
 return str
}

function getHeaders() {
 var obj = document.getElementsByTagName("*")
 var el = document.createElement("UL")
 var tagList = "H1;H2;H3;H4;H5;H6;"
 for (var i=0;i < obj.length;i++)
  if (tagList.indexOf(obj[i].tagName+";")>=0) {
   var eLI = document.createElement("LI")
   var eBookmark = document.createElement("A")
   eBookmark.id  = "destHeader" +i
   var eALink = document.createElement("A")
   eALink.href = "#" + eBookmark.id
   var eLIText = document.createTextNode(getTextForElement(obj[i]))
   obj[i].appendChild(eBookmark)
   eLI.className="toc" + obj[i].tagName

   eALink.appendChild(eLIText)  
   eLI.appendChild(eALink)
   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()
 var startEl = document.getElementsByTagName("BODY")[0]
 startEl.insertBefore(el,startEl.childNodes[0])
}

window.onload =doLoad

Try the demonstration if you are running Internet Explorer 5.0 or Netscape Gecko

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