Bildverzeichnis (Thumbnail) mit Javascript erzeugen

[Gunnar Bittersmann]

@@Linuchs

var bilder = document.querySelectorAll( "img" );

Nö, das ist Quatsch. document.images existiert bereits.

---

for ( let i=0; i<bilder.length; i++ ) {

Die Tage der guten alten FOR-Schleife sind aber nun auch schon eine ganze Weile gezählt. Es gibt sicher noch Anwendungsfälle dafür, aber alle Elemente einer Sammlung zu durchlaufen, zählt nicht dazu; dafür gibt es for … of.

Dann musst du nicht mit Indizes rummachen und der Code wird lesbarer:

for (const image of document.images) {
	console.log(image);
}

Für etliche Objekttypen gibt es auch die forEach-Methode; nicht aber für HTMLCollection, was document.images ist. Kann man aber fix in ein Array umwandeln:

[...document.images].forEach(image => {
	console.log(image);
});

---

  thumbverzeichnis  += "<div class='li bo'>\n";

Das ist unlesbarer Code. Wofür steht 'li'? Wofür steht 'bo'?

Und wozu sollen die div-Container überhaupt gut sein? Nur die img-Elemente sollten doch reichen?

Und die Zeilenumbrüche interessieren den HTML-Parser nicht die Bohne, die \n können weg.

🖖 Live long and prosper