Javascript 对于 body 中的每个元素类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10964163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
for each element type in body
提问by jason m
For example
例如
For each div in body
div.innerHtml = "poo"
next div
this is obviously psuedo code but demonstrates what i am trying to do.
这显然是伪代码，但演示了我正在尝试做的事情。
回答by gdoron is supporting Monica
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "foo";
}?
If you want to look only in the <body>:
如果您只想查看<body>：
var elements = document.body.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "foo";
}?
回答by Roko C. Buljan
NodeList.forEach
10
NodeList.forEach 10
querySelectorAllreturns a static non-live NodeListexposing a forEachmethod:
querySelectorAll返回一个静态非实时NodeList公开forEach方法：
const elements = document.querySelectorAll('div');
elements.forEach( el => {
el.innerHTML = "foo";
});
Document.querySelectorAllMDN
NodeList.prototype.forEach()MDN
Document.querySelectorAll MDN
NodeList.prototype.forEach() MDN
Array.from9
Array.from 9
const elements = document.querySelectorAll('div');
Array.from(elements).forEach( (el) => {
el.innerHTML = "foo";
});
Array Destructuring9
数组解构9
const elements = document.querySelectorAll('div');
[...elements].forEach( el => {
el.innerHTML = "foo";
});
Destructuring assignmentMDN
Document.querySelectorAll()MDN
解构赋值MDN
Document.querySelectorAll() MDN
Array forEach.call9
数组 forEach.call 9
var elements = document.querySelectorAll('div');
[].forEach.call(elements, function( el ) {
el.innerHTML = "foo";
});
For loop
For 循环
var elements = document.getElementsByTagName('div');
for (var i=0; i<elements.length; i++) {
elements[i].innerHTML = "foo";
}
回答by Arthur Araújo
Easy job:
轻松工作：
NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;
And now:
现在：
// 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)
})
回答by StardustGogeta
An alternate version with the new Array.from()method and arrow functionsin ES2015:
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>If size is absolutely crucial for you, then this solution is only 84 bytes, compared to 113 for @Roko's answer and 120 for @gdoron's.
如果大小对您来说绝对重要，那么此解决方案只有 84 个字节，而@Roko 的答案为 113 个字节，@gdoron 的答案为 120 个字节。
In that case, jQuery could shorten this far more:
在这种情况下，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>Now only 26 bytes!
现在只有 26 个字节！
回答by Алексей
For ES6
对于 ES6
let elements = document.body.getElementsByTagName('div');
Array.prototype.forEach.call(elements, e => {
e.innerHTML = "foo";
});
