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

【问题标题】：Iterating through all the <div> tags on a page遍历页面上的所有 <div> 标签
【发布时间】：2010-10-25 02:20:40
【问题描述】：

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

【问题讨论】：

【解决方案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...";
}

【讨论】：

最好使用标准的“for”循环——“for in”循环用于遍历对象。
另外，缓存数组的长度可以提高性能。例如：“for (var i = 0, l = divs.length; i
我可以补充一点，从 divs.length-1 倒数到 0，而不是向上倒数，会稍微快一点，在大多数情况下并不明显，但它可能会派上用场，记住某个点。
Sam Lee 在这个答案中在哪里找到他想要的属性？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您还可以使用选择器引擎，例如 Sizzle。

史蒂夫

【讨论】：

或 jQuery $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } });
我认为您的评论与我的回答无关——它没有使用任何选择器。您为什么不发布您的 jQuery 代码作为另一个答案？

【解决方案4】：

使用JS `ES6` `For ... of`

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

【讨论】：

使用JS ES6 For ... of

使用JS `ES6` `For ... of`