20

例如

For each div in body
          div.innerHtml = "poo"
next div

这显然是伪代码，但演示了我正在尝试做的事情。

编辑分享它让我非常高兴看到 9 岁的问题，看看我已经走了多远，这个问题仍然有益于其他人。

4

5 回答 5

41 
var elements = document.getElementsByTagName('div');

for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "foo";
}​

现场演示

如果您只想查看<body>：

var elements = document.body.getElementsByTagName('div');

for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "foo";
}​
于 2012-06-09T20:00:59.210 回答
37

NodeList.forEach 铬图标 火狐图标 边缘图标 歌剧图标 Safari 图标10

querySelectorAll返回一个静态的非实时NodeList暴露forEach方法：

const elements = document.querySelectorAll('div');

elements.forEach( el => {
  el.innerHTML = "foo";
});

Document.querySelectorAll MDN
NodeList.prototype.forEach() MDN

Array.from 铬图标 火狐图标 边缘图标 歌剧图标 Safari 图标9

const elements = document.querySelectorAll('div');

Array.from(elements).forEach( (el) => {
  el.innerHTML = "foo";
});

Array.from() MDN

数组解构 铬图标 火狐图标 边缘图标 歌剧图标 Safari 图标9

const elements = document.querySelectorAll('div');

[...elements].forEach( el => {
  el.innerHTML = "foo";
});

解构赋值MDN
Document.querySelectorAll() MDN

数组 forEach.call 铬图标 火狐图标 边缘图标 IExplor 图标9 歌剧图标 Safari 图标

var elements = document.querySelectorAll('div');

[].forEach.call(elements, function( el ) {
  el.innerHTML = "foo";
});

Array.prototype.forEach() MDN

循环

var elements = document.getElementsByTagName('div');

for (var i=0; i<elements.length; i++) {
  elements[i].innerHTML = "foo";
}

Element.getElementsByTagName() MDN

于 2015-09-19T04:52:57.633 回答
5

轻松的工作：

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;

现在：

// VanillaJS / JavaScript puro
var lista_de_divs = document.querySelectorAll('div')
lista_de_divs.forEach(function (div, i) {
    // código...
    console.log(i, div)
})


// jQuery
$('div').forEach(function (div, i) {
    // código...
    console.log(i, div)
})
于 2017-02-22T12:20:57.637 回答
1

ES2015 中具有新Array.from()方法和箭头函数的替代版本：

Array.from(document.body.getElementsByTagName("div")).forEach(a=>a.innerHTML='foo');
<div></div>
<div></div>
<div>Test</div>
<div></div>
<div>Hello</div>
<div>World</div>

如果大小对您来说绝对至关重要，那么这个解决方案只有 84 个字节，而 @Roko 的答案为 113 字节，@gdoron 的答案为 120 字节。

在这种情况下，jQuery 可以进一步缩短：

$("body div").html('foo');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<div></div>
<div>Test</div>
<div></div>
<div>Hello</div>
<div>World</div>

现在只有 26 个字节！

于 2016-09-23T19:56:11.217 回答
1

对于 ES6

let elements = document.body.getElementsByTagName('div');

Array.prototype.forEach.call(elements, e => {
  e.innerHTML = "foo";
});
于 2019-08-02T09:13:02.603 回答