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;
});