Documentstructuur met Javascript
Monday 31 January 2005
Note: this article was published over 4 years ago. Techniques, tools or technologies described in this article could be outdated. Please help me by notifying me of any broken links you might encounter.
Ik ben lui en laat het liefst zo veel mogelijk voor mij gedaan worden. Door anderen, dieren, of zoals in dit artikel door de computer.
Ik heb geen zin om voor elk artikel een lijst met interne links naar alle onderdelen te schrijven, dus laat ik dat aan Javascript over.
Let op: Over het algemeen is het geen goed idee om navigatie–elementen via javascript te genereren, omdat gebruikers zonder javascript dan niet kunnen navigeren.
Op deze site gebruik ik het script voor de secundaire navigatie. Bezoekers met javascript krijgen een extra navigatie–optie, maar zonder het script is het document nog goed te gebruiken.
De werking
Het script zorgt voor het volgende:
- Alle hoofdkoppen een id meegeven
- Een lijst aanmaken
- De lijst vullen met links naar de koppen
Het script zorgt ervoor dat niet-toegestane karakters in de id’s worden vervangen door een – (dash). Wanneer er meerdere koppen dezelfde naam hebben wordt er een cijfer aan de id toegevoegt om het uniek te maken.
Bekijk het script in actie, inclusief commentaar in de broncode.
De HTML
Het script zoekt naar alle <h1> tags in het HTML document, de structuur van je document zal er ongeveer zo uitzien:
<h1>Kop 1</h1>
<p>Paragraaf met tekst</p>
<h1>Kop 2</h1>
<p>Paragraaf met tekst</p>
<h1>Kop 3</h1>
<p>Paragraaf met tekst</p>
...
Na het uitvoeren van het script zal het document er dan als volgt uit zien:
<h1>Overzicht</h1>
<ul>
<li><a href="#Kop-1">Kop 1</a></li>
<li><a href="#Kop-2">Kop 2</a></li>
<li><a href="#Kop-3">Kop 3</a></li>
</ul>
<h1 id="Kop-1">Kop 1</h1>
<p>Paragraaf met tekst</p>
<h1 id="Kop-2">Kop 2</h1>
<p>Paragraaf met tekst</p>
<h1 id="Kop-3">Kop 3</h1>
<p>Paragraaf met tekst</p>
...
Het script
Voor uitleg over de werking van het script verwijs ik naar de broncode van het script in actie.
maakOverzicht = function() {
if (document.getElementById && document.createElement){
b = document.getElementsByTagName("body")[0];
ul = document.createElement("ul");
b.insertBefore(ul, b.firstChild);
headers = document.getElementsByTagName("h1");
var idNum = 2;
for(var i=0;i<headers.length;i++){
var display = headers[i].firstChild.nodeValue;
var id = display.replace(/\W/g, "-");
id = id.replace(/(--+)/g, "-");
if(document.getElementById(id))
id += "-" + idNum++;
headers[i].setAttribute("id", id);
li = document.createElement("li");
ul.appendChild(li);
a = document.createElement("a");
li.appendChild(a);
a.setAttribute("href", "#" + id);
doc = document.createTextNode(display);
a.appendChild(doc);
}
kop = document.createElement("h1");
kop.appendChild(document.createTextNode("Overzicht"));
b.insertBefore(kop, b.firstChild);
}
}
window.onload = maakOverzicht;
Verbetering
Er is nog ruimte voor verbetering van dit script.
Denk bijvoorbeeld aan ondersteuning voor twee koppen met dezelfde naam en het doorlopen van subkoppen, zodat er een boomstructuur van het document getekend kan worden.
Ook zou het mooier zijn als de spaties vervangen werden door een underscore of dash.
Peter Paul Koch heeft een soortgelijk script geschreven waarbij er een boomstructuur wordt getekend, deze methode is gemakkelijk toe te passen op mijn script.
Het enige wat me nog stoort aan dit script is dat het niet mogelijk is om de anchor in de URL mee te geven. De browser vindt geen element met de aangegeven anchor omdat die pas na het laden van het document wordt aangemaakt. Dit is simpel te verhelpen door aan het einde van het script de volgende code te plaatsen:
location.hash = location.hash;
Dit werkt in Firefox en IE, maar Opera ververst de pagina wanneer je de location properties opgeeft. Dit resulteert in een loop waarin de pagina steeds ververst en dus onbruikbaar wordt. Als iemand een goede oplossing voor dit probleem weet hoor ik het graag!
Update:
Op aanraden van Rikkert Koppes heb ik het script aangepast; Het script vervangt nu alle niet-toegestane karakters door een – (dash), ook wordt er voor gezorgd dat meerdere koppen met dezelfde naam gebruikt kunnen worden.