HTML Überschriften Pharsen und Inhaltsverzeichnis erstellen

[Orlok]

Hallo

Dazu ist JS optimal.

Das sehe ich anders. Jedenfalls wenn das Skript im Browser ausgeführt werden soll, denn man kann sich nicht darauf verlassen, dass JS dort immer zur Verfügung steht. Vielleicht wurde JavaScript ausgeschaltet. Oder das jeweilige Skript konnte wegen schlechtem Empfang nicht vollständig geladen werden. In solchen Fällen gibt es dann kein Inhaltsverzeichnis, was die Benutzbarkeit der Seite stark einschränkt. Welcher Benutzer will schon bis herab zum Seitenende scrollen, nur um sich einen Überblick über den Inhalt zu verschaffen?

Ein Inhaltsverzeichnis mit Links zu den jeweiligen Abschnitten einer Seite gehört für mich zu den Features, die auch dann verfügbar sein sollten, wenn JavaScript es nicht ist.

---

Trotzdem noch ein paar Anmerkungen:

	_.toc=addToc( _.body.querySelectorAll("h1,h2,h3") );

///

function addToc( h, i, toc ){
	toc='';
	for(i=0; i<h.length; i++){
		h[i].id = "h"+i;
		toc += '<a class="'+h[i].nodeName+'" href="#h'+i+'">'+h[i].innerText+'</a>';
	}
	return toc;
}

Warum legst du hier nicht lokale Variablen an? Unabhängig davon, ob für den zweiten und dritten Parameter Werte übergeben wurden, bindest du im Körper der Funktion neue Werte an die Bezeichner. Das verschleiert den eigentlichen Zweck der Variablen. Daran sollte sich niemand ein Beispiel nehmen.

Aus semantischen Gründen würde ich auf Elementen auch lieber die Eigenschaft tagName statt der Eigenschaft nodeName referenzieren, aber das schenkt sich ansonsten nichts. Bei innerText sollte man sich hingegen gut überlegen, ob man das wirklich will. Hier ist in der Regel die Eigenschaft textContent die bessere Wahl, unter anderem, weil innerText einen Reflow auslösen kann. Das heißt, abhängig vom jeweiligen Browser, wird bei jedem Zugriff auf die Eigenschaft ein Teil der Seite neu gerendert.

Bei der Entwicklung würde ich darüber hinaus Templateliterale verwenden, statt die Zeichenketten mit dem Plusoperator zu verbinden. Vor der Auslieferung an den Client kann man den Code dann mit einem Transpiler wie Babel in ein kompatibleres Format übersetzen. So kann man die Vorteile moderner Syntax nutzen, ohne damit Nutzer auszuschließen.

Viele Grüße,

Orlok