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

Posted 2023-02-22

【中文标题】遍历页面上的所有 <div> 标签

【英文标题】：Iterating through all the <div> tags on a page

【发布时间】：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'