使用 javascript 和循环获取所有正文元素

Posted 2023-03-05

【中文标题】使用 javascript 和循环获取所有正文元素

【英文标题】：Get all body elements with javascript and loop

【发布时间】：2013-10-28 10:01:48

【问题描述】：

将正文的所有元素放在一个数组中然后循环遍历每个元素的“最快”（最有效）方法是什么？

【问题讨论】：

你想要完整的 DOM 树还是只是它的第一层？

之后是需要数组还是只想遍历所有节点？

【参考方案1】：

您可以在 jquery 中使用星形选择器。

var allElems=$('body').find('*');

allElems 将是类似对象的数组，因此您可以在其上创建一个 for 循环，或者您可以使用 jquery 的每个方法来遍历所有对象。喜欢

allElems.each(function()
     var elm=this, //javascript DOM object
         $elm=$(this) //jquery object for element.

);

如果你只想使用 javascript，你可以使用 querySelectorAll dom 方法。

var allElems=document.body.querySelectorAll('*'); // new browser support

或

var allElems=document.body.getElementsByTagName('*'); //all browser support

你可以使用 for 循环遍历所有元素。

【讨论】：

OP 的问题中根本没有 jQuery 的迹象。

@jfriend00 也添加了js解决方案。

【参考方案2】：

我建议这样做：

var items = document.body.getElementsByTagName("*");
for (var i = 0, len = items.length; i < len; i++) 
    // do something with items[i] here

【参考方案3】：

你可以使用：

var els = document.body.querySelectorAll( '*' ),
    len = els.length, i = 0;

for ( ; i < len; i++ )
    console.log( els[i] );

querySelectorAll 的浏览器支持：http://caniuse.com/#feat=queryselector

有趣的是，querySelectorAll 返回静态 NodeLists，与 getElementsByTagName 不同，后者返回实时 NodeLists。

【讨论】：

您能解释一下静态节点和活动节点之间的区别吗？

【参考方案4】：

应该是这样的：

var allElements = $(body).find('*');

allElements.each(function()
   //do something
)