@@Linuchs > ~~~js,bad > var bilder = document.querySelectorAll( "img" ); > ~~~ Nö, das ist Quatsch. [`document.images`{:.language-js.good}](https://developer.mozilla.org/de/docs/Web/API/Document/images) existiert bereits. --- > ~~~js > 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`{:.language-js.good}](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of). Dann musst du nicht mit Indizes rummachen und der Code wird lesbarer: ```js for (const image of document.images) { console.log(image); } ``` Für etliche Objekttypen gibt es auch die `forEach`{:.language-js}-Methode; nicht aber für HTMLCollection, was `document.images`{:.language-js} ist. Kann man aber fix in ein Array umwandeln: ```js [...document.images].forEach(image => { console.log(image); }); ``` --- > ~~~js,bad > thumbverzeichnis += "<div class='li bo'>\n"; > ~~~ Das ist unlesbarer Code. Wofür steht `'li'`{:.bad}? Wofür steht `'bo'`{:.bad}? 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`{:.language-js.bad} können weg. 🖖 Live long and prosper {:@en} -- *“Space: the final frontier. Above us. Around us. Within us. We have always looked to the stars to discover who we are.”*{:@en} — Michael Burnham in *Star Trek: Discovery* S2:E1

@@Linuchs > ~~~js,bad > var bilder = document.querySelectorAll( "img" ); > ~~~ Nö, das ist Quatsch. [`document.images`{:.language-js.good}](https://developer.mozilla.org/de/docs/Web/API/Document/images) existiert bereits. --- > ~~~js > 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`{:.language-js.good}](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of). Dann musst du nicht mit Indizes rummachen und der Code wird lesbarer: ```js for (const image of document.images) { console.log(image); } ``` Für etliche Objekttypen gibt es auch die `forEach`{:.language-js}-Methode; nicht aber für HTMLCollection, was `document.images`{:.language-js} ist. Kann man aber fix in ein Array umwandeln: ```js [...document.images].forEach(image => { console.log(image); }); ``` --- > ~~~js,bad > thumbverzeichnis += "<div class='li bo'>\n"; > ~~~ Das ist unlesbarer Code. Wofür steht `'li'`{:.bad}? Wofür steht `'bo'`{:.bad}? 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`{:.language-js.bad} könn en weg. 🖖 Live long and prosper {:@en} -- *“Space: the final frontier. Above us. Around us. Within us. We have always looked to the stars to discover who we are.”*{:@en} — Michael Burnham in *Star Trek: Discovery* S2:E1

@@Linuchs > ~~~js,bad > var bilder = document.querySelectorAll( "img" ); > ~~~ Nö, das ist Quatsch. [`document.images`{:.language-js.good}](https://developer.mozilla.org/de/docs/Web/API/Document/images) existiert bereits. --- > ~~~js > 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`{:.language-js.good}](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of). Dann musst du nicht mit Indizes rummachen und der Code wird lesbarer: ```js for (const image of document.images) { console.log(image); } ``` Für etliche Objekttypen gibt es auch die `forEach`{:.language-js}-Methode; nicht aber für HTMLCollection, was `document.images`{:.language-js} ist. Kann man aber fix in ein Array umwandeln: ```js [...document.images].forEach(image => { console.log(image); }); ``` --- > ~~~js,bad > thumbverzeichnis += "<div class='li bo'>\n"; > ~~~ Das ist unlesbarer Code. Wofür steht `'li'`{:.bad}? Wofür steht `'bo'`{:.bad}? Und wozu sollen die `div`-Container überhaupt gut sein? Nur die `img`-Elemente sollten doch reichen? 🖖 Live long and prosper {:@en} -- *“Space: the final frontier. Above us. Around us. Within us. We have always looked to the stars to discover who we are.”*{:@en} — Michael Burnham in *Star Trek: Discovery* S2:E1