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

Question

我想使用 Javascript 遍历页面上的所有元素，看看它们是否有属性集。有没有一种简单的方法可以做到这一点，还是我必须使用递归解决方案？

原文由 Sam Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

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

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

[ edit october 2022 ] 非常古老的答案。今天我建议使用 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 发布，翻译遵循 CC BY-SA 4.0 许可协议