如何遍历页面上的所有DOM元素？

沃梦达教程前端问题

2022-01-01

How can I loop through ALL DOM elements on a page?(如何遍历页面上的所有DOM元素？)

本文介绍了如何遍历页面上的所有DOM元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我正在尝试循环访问页面上的所有元素，所以我要检查此页面上存在的每个元素是否有特殊类。

那么，如何说我要检查每个元素？

您可以将*传递给getElementsByTagName()，这样它将返回页面中的所有元素：

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
     // Do something with the element here
}

请注意，您可以使用querySelectorAll()(如果可用)(IE9+、IE8中的CSS)仅查找具有特定类的元素。

if (document.querySelectorAll)
    var clsElements = document.querySelectorAll(".mySpeshalClass");
else
    // loop through all elements instead

这肯定会加快现代浏览器的速度。

浏览器现在支持foreach on NodeList。这意味着您可以直接循环元素，而不是编写自己的for循环。

document.querySelectorAll('*').forEach(function(node) {
    // Do whatever you want with the node object.
});

性能说明-使用特定选择器尽量确定您要查找的范围。根据页面的复杂程度，通用选择器可以返回大量节点。此外，如果您不关心<head>子项，请考虑使用document.body.querySelectorAll而不是document.querySelectorAll。

这篇关于如何遍历页面上的所有DOM元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：如何遍历页面上的所有DOM元素？

上一篇：具有ID的DOM树元素是否会成为全局属性？

下一篇：为什么HTML中不允许重复的ID值？