document.querySelectorAllにforEachを使用したサンプル
HTML
<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>
<hr>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<hr>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<hr>
<div class="baz"></div>
<div class="baz"></div>
<div class="baz"></div>
JavaScript
var el2 = document.querySelectorAll('.hoge');
Object.keys(el2).forEach(function(i) {
el2[i].textContent = 'fuga' + i;
});
// こちらはPC版Chromeでなければエラーで何も表示されない
var el = document.querySelectorAll('.foo');
console.info(typeof el); // => object
el.forEach(function(el, i) {
el.textContent = 'foo' + i;
});
// 用途によってはArray.fromが使える
var el3 = document.querySelectorAll('.bar');
Array.from(el3).forEach((x, i) => x.textContent = 'bar' + i);
// iOS 9 Safariのような古いブラウザでも使用可能な書き方
var el0 = [].slice.call(document.querySelectorAll('.baz'));
el0.forEach(function(el, i) {
el0.textContent = 'baz' + i;
});