遍历页面上所有的<div>标签

Question

我想使用 Javascript 遍历页面上的所有元素，并查看它们是否设置了某个属性。有没有简单的方法可以实现这一点，还是说我必须使用递归解决方案？

- Sam Lee

Answer 1

你可以使用：

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
   //do something to each div like
   divs[i].innerHTML = "something new...";
}

- Jose Basilio

---

最好使用标准的“for”循环，而“for in”循环则适用于迭代对象。 - Steve Harrison

同时，缓存数组的长度可以提高性能。例如："for (var i = 0, l = divs.length; i < l; i++)"… - Steve Harrison

我能否补充一下，从divs.length-1倒数到0会稍微快一些，大部分情况下不会注意到，但有时记住这一点可能会派上用场。 - scragar

Sam Lee 在这个答案中找到他想要的属性在哪里？ - KooiInc

Answer 2

在页面上的一个或多个 div 中查找属性：

var divs = document.getElementsByTagName("div"), i=divs.length;
while (i--) {
   if (divs[i].getAttribute([yourProperty]) === 'yourValue'){
      //do something
   } 
}

[2022年10月编辑] 这是一个非常古老的回答。今天我建议使用 CSS 选择器。例如：

const withStyle = document.querySelectorAll('[style]');
console.log(`Found ${withStyle.length} elements with style:\n${
  [...withStyle]
   .map(el =>`<${el.tagName}>: ${el.getAttribute('style')}`)
   .join(`; `) }` );

<div style="color:#777">
  <div style="color:red;background:#EEE">red</div>
  <div>no color</div>
  <div data-something>data-attribute</div>
  <div style="color:green">green</div>
  <span>Hello</span>
  <h3 style="font-family:monospace">That's all folks</h3>
</div>

- KooiInc

Answer 3

使用JS ES6 For ... of语句

for (elem of document.getElementsByTagName('div')){
  elem.style.marginTop='20px'
}

- Timo

Answer 4

你也可以使用选择器引擎，例如Sizzle。

Steve

- Steve Harrison

---

$("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); - IAdapter

我认为你的评论与我的答案无关——它没有使用任何选择器。为什么不将你的jQuery代码作为另一个答案发布呢？ - Steve Harrison