• [JavaScript] Automatisches Erzeugen eines Inhaltsverzeichnisses

    Hallo zusammen,

    da ich in der letzten Zeit öfters mal eine Homepage für mich erstellt habe und auf der ein oder anderen Seite ein Inhaltsverzeichnis erstellt habe, habe ich mich mal damit beschäftigt, wie ich ein Inhaltsverzeichnis automatisch mithilfe von Javaskript erzeugen kann. Ich gehe mal davon aus, dass der ein oder andere das Gleiche vor hat.

    Da das Inhaltsverzeichnis noch stylebar sein soll, muss es flexibel gehalten werden. Zudem sollte es einfach zu benutzen sein.
    Das Inhaltsverzeichnis soll aus den Titeln (h1, h2, h3,...) erzeugt werden.




    Für dieses Inhaltsverzeichnis müssen wir ersteinmal drei Variablen erstellen.

    Die Titel können wir über document.getElementsByTagName(...) abfragen. Allerdings können wir nicht einfach document.getElementsByTagName("h1") aufrufen, da so die Reihnfolge der Titel (nicht h1) verloren gehen würde. Deshalb übergeben wir ein * um damit alle Elemente aus der HTML-Datei zu erhalten.
    Damit wir nun nur die Title erhalten, bauen wir in der for-Schleife - um über alle Elemente zu iterieren - eine if-Bedingung ein, in der wir überprüfen, ob das Element ein Titel ist.

    Damit der Benutzer die Wahl hat, wieviele Ebenen das Inhaltsverzeichnis besitzen soll, übergeben wir an diese Funktion einen Parameter 'maxDepth'. Um nun die Überschriften zu filtern, die der Benutzer haben will, müssen wir noch die Ebene aus dem Titel-Tag filtern. Mit einer if-Bedingung werden dann nur die Titel durchgelassen, die in der richtigen Ebene sitzen.
    Beispiel:


    In der Funktion 'addHeader(header, depth)' fügen wir den Titel an seinen richtigen Platz (Das war auch das kniffligste an der Sache).
    Zu ersteinmal müssen wir für die Differenz der aktuellen und der letzten Ebene berechnen, um die Struktur zu erhalten.
    Zudem brauchen wir den Titel-Text und müssen für den Titel eine ID erstellen, damit wir später eine interne Referenz darauf legen können.

    Jetzt kommt der knifflige Teil. Wir müssen nun in den Listen-Ebenen von einer Ebene in die andere "hüpfen" können, sodass wir von Ebene 3 in Ebene 1 zurück kommen und umgekehrt.
    Um von Ebene 1 in Ebene 3 zu kommen, erzeugen wir in einer for-Schleife so oft eine neue Liste, bis wir in der richtigen Ebene angelangt sind. Anschließend fügen wir dieser Liste den Titel mit internen Verweiß hinzu.

    In die andere Richtung (Ebene 3 auf Ebene 1) geht dann so:

    Ist ein Titel in der gleichen Ebene, wie sein Vorgänger, so brauchen wir keinen Ebenenwechsel vornehmen und können den Titel direkt hinzufügen.

    Am Ende von dieser Methode müssen wir nun nur noch den indexCounter um eins erhöhen und die lastDepth auf die aktuelle Depth setzen.

    Damit unser Inhaltsverzeichnis jetzt noch auf der Homepage angezeigt wird, müssen wir am Ende von der createIndex(maxDepth) den Text noch dort hinzufügen. Ich habe das mittels eines div-Elements gelöst, da dies der einfachste Weg ist und sich dieses noch schön gestalten lässt.




    Das Inhaltsverzeichnis können wir nun ganz einfach durch folgenden Aufruf in unserer HTML-Datei erzeugen:
    HTML-Code: [Anzeigen]
    <body onLoad="createIndex(3)">
    	<div id="Index"></div>
    	<h1>Überschrift1</h1>
    	<h2>Überschrift2</h2>
    	<h3>Überschrift3</h3>
    	<h1>Überschrift1</h1>
    </body>
    Dadurch, dass wir den Titeln in der jeweiligen Ebene eine spezifische ID gegeben haben, können wir dafür nun auch mithilfe von CSS ein Template anfertigen, um das Inhaltsverzeichnis ein wenig zu verschönern.
    Auf die Überschriften kann man im CSS über #h1, #h2, #h3, etc., auf das div-Element über #Index und auf die Listen über #ul1, #ul2, #ul3, etc. zugreifen. Als Beispiel:




    Eine Beispiel-HTML-Datei und Indexer.js habe ich für euch unten angehangen.

    Ich hoffe euch hat mein Tutorial gefallen. Für Anregungen und Verbesserungsvorschläge bin ich selbstverständlich offen.

    Gruß

    Fabio
    Tauwin bedankt sich. 


     
    Kommentare 2 Kommentare
    1. Avatar von Codebase
      Codebase -
      Hallo
      ich würde das ganze mit Jquery lösen da du dann Browser unabhängier bist und das ganze auch Im ie, ff usw. gleich funktioniert aber sonst coole sache

      lg
    1. Avatar von Fabio Hellmann
      Fabio Hellmann -
      Hi,
      also ich kenn mich mit JQuery ehrlichgesagt noch nicht so gut aus, aber mit Javascript ist man doch ebenfalls Browserunabhängig. Vor allem, da JQuery doch auf Javascript aufbaut.

      Gruß

      Fabio