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

2022-02-21 00:00:00 dom javascript

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

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

解决方案

您可以将*传递给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。

相关文章