我试图遍历页面上的所有元素，所以我想检查此页面上存在的每个元素是否有一个特殊的类。
那么，我怎么说我想检查每个元素？
Javascript：如何遍历页面上的所有 DOM 元素？
IT技术
javascript
dom
2021-01-26 12:09:32
6个回答
您可以传递一个*togetElementsByTagName()以便它返回页面中的所有元素：
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
这肯定会加快现代浏览器的处理速度。
浏览器现在支持NodeList 上的 foreach。这意味着您可以直接循环元素而不是编写自己的 for 循环。
document.querySelectorAll('*').forEach(function(node) {
// Do whatever you want with the node object.
});
性能说明- 通过使用特定选择器，尽最大努力确定您要查找的范围。根据页面的复杂性，通用选择器可以返回大量节点。另外，当您不关心孩子时，请考虑使用
document.body.querySelectorAll代替。document.querySelectorAll<head>
正在寻找相同的。嗯，不完全是。我只想列出所有 DOM 节点。
var currentNode,
ni = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT);
while(currentNode = ni.nextNode()) {
console.log(currentNode.nodeName);
}
要获取具有特定类的元素，我们可以使用过滤器功能。
var currentNode,
ni = document.createNodeIterator(
document.documentElement,
NodeFilter.SHOW_ELEMENT,
function(node){
return node.classList.contains('toggleable') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
}
);
while(currentNode = ni.nextNode()) {
console.log(currentNode.nodeName);
}
在MDN上找到解决方案
与往常一样，最好的解决方案是使用递归：
loop(document);
function loop(node){
// do some thing with the node here
var nodes = node.childNodes;
for (var i = 0; i <nodes.length; i++){
if(!nodes[i]){
continue;
}
if(nodes[i].childNodes.length > 0){
loop(nodes[i]);
}
}
}
与其他建议不同的是，此解决方案不需要您为所有节点创建一个数组，因此它更注重内存。更重要的是，它发现了更多的结果。我不确定这些结果是什么，但是在 chrome 上进行测试时，它发现与document.getElementsByTagName("*");
这是关于如何遍历文档或元素的另一个示例：
function getNodeList(elem){
var l=new Array(elem),c=1,ret=new Array();
//This first loop will loop until the count var is stable//
for(var r=0;r<c;r++){
//This loop will loop thru the child element list//
for(var z=0;z<l[r].childNodes.length;z++){
//Push the element to the return array.
ret.push(l[r].childNodes[z]);
if(l[r].childNodes[z].childNodes[0]){
l.push(l[r].childNodes[z]);c++;
}//IF
}//FOR
}//FOR
return ret;
}
对于那些使用 Jquery 的人
$("*").each(function(i,e){console.log(i+' '+e)});