# Table des matières automatique
       
       Sur le site du 
  HTML hollandaisvolant
       on trouve un bout de javascript pour obtenir une table des matières 
       automatique à partir des titres présents 
       dans une page.
       
       Je l'ai un peu modifié pour qu'il ne tienne pas compte des "h1" car 
       c'est souvent le titre de la page, et qu'il rajoute des "id" vers les 
       différentes parties s'il n'y en a pas déjà.
       
       Par ailleurs, la table des matières n'apparaît que s'il y a plus de 3 
       titres dans une page.
       
       Afin d'en profiter, il suffit d'insérer dans le code html la balise 
       suivante :
       
       ```
  HTML URL:ul id="toc"</ul>
       ```
       
       Voici la fonction qui se charge d'afficher la table des matières:
       
       ```
       /* display toc */
       function toc() {
       var TOC = document.getElementById('toc'),
           headings = document.querySelectorAll('h2, h3, h4, h5, h6'),
           parentLevel = 2,
           tocn = 0,
           cursorNode = TOC;
           if (headings.length < 3) {
               return;
           } else {
               TOC.style.display = 'block';
           }
       
           for (var i = 0, len = headings.length ; i < len ; ++i) {
               var currentHeading = headings[i];
               var newLevel = parseInt(currentHeading.tagName.substr(1,1));
               var diff = newLevel - parentLevel;
               if (diff > 0) {
                   var containerLiNode = cursorNode.lastChild;
                   var ulNode = document.createElement('UL')
                   containerLiNode.appendChild(ulNode);
                   cursorNode = ulNode;
                   parentLevel = newLevel;     
               }
               if (diff < 0) {
                   while (0 !== diff++) {
                       cursorNode = cursorNode.parentNode.parentNode;
                   }
                   parentLevel = newLevel;
               }
       
               var liNode = document.createElement('LI');
               if (!(currentHeading.hasAttribute('id'))) {
               tocn++;
               currentHeading.setAttribute('id', "toc"+tocn);
             }
                   var link = document.createElement('A');
                   link.setAttribute('href', '#' + currentHeading.getAttribute('id'));
                   link.appendChild(document.createTextNode(currentHeading.textContent))
                   liNode.appendChild(link);
               cursorNode.appendChild(liNode);
           }
       }
       ```