Question

例如

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

这显然是伪代码，但演示了我想要做的事情。

Answer 1

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

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

Live DEMO

如果您只想查看<body>：

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

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

Answer 2

<强> NodeList.forEach Chrome icon Firefox icon Edge icon Opera icon Safari icon ¹⁰

querySelectorAll返回展开NodeList方法的静态非实时forEach：

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

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

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

<强> Array.from Chrome icon Firefox icon Edge icon Opera icon Safari icon ^{的 9}

const elements = document.querySelectorAll('div'); Array.from(elements).forEach( (el) => { el.innerHTML = "foo"; });

Array.from()^MDN

数组解构 ^{的 9}

const elements = document.querySelectorAll('div'); [...elements].forEach( el => { el.innerHTML = "foo"; });

Destructuring assignment^MDN
Document.querySelectorAll()^MDN

Array forEach.call ^{的 9}

var elements = document.querySelectorAll('div'); [].forEach.call(elements, function( el ) { el.innerHTML = "foo"; });

Array.prototype.forEach()^MDN

For循环

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

Element.getElementsByTagName()^MDN

Answer 3

轻松工作：

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

Answer 4

在ES2015中采用新Array.from()方法和arrow functions的备用版本：

＆＃13;

Array.from(document.body.getElementsByTagName("div")).forEach(a=>a.innerHTML='foo');

＆＃13;

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

＆＃13;

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

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

＆＃13;

$("body div").html('foo');

＆＃13;

<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>

＆＃13;

现在只有26个字节！

Answer 5

对于ES6

Invalid token

对于正文中的每个元素类型

5 个答案: