如何在页面上遍历所有DOM元素?

我试图在一个页面上循环所有元素，所以我想检查存在于这个页面上的一个特殊类的每个元素。

我怎么说我要检查每个元素呢?

336170 次浏览
小开
最佳答案

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

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


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

注意，你可以使用querySelectorAll()，如果它是可用的(IE9+， CSS在IE8)，只是找到一个特定类的元素。

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

这无疑会加快现代浏览器的速度。

浏览器现在支持foreach在节点列表。这意味着您可以直接循环元素，而不必编写自己的for循环。

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

性能报告 -尽你最大的努力通过使用特定的选择器来确定你正在寻找的范围。通用选择器可以根据页面的复杂程度返回大量节点。另外，当你不关心<head>子节点时，可以考虑使用document.body.querySelectorAll而不是document.querySelectorAll。

小开
你可以试试 document.getElementsByClassName('special_class'); < / p >
小开

下面是另一个关于如何循环遍历文档或元素的示例:

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;
}
小开

from this link
javascript参考 < / >强

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function findhead1()
{
var tag, tags;
// or you can use var allElem=document.all; and loop on it
tags = "The tags in the page are:"
for(i = 0; i < document.all.length; i++)
{
tag = document.all(i).tagName;
tags = tags + "\r" + tag;
}
document.write(tags);
}


//  -->
</script>
</head>
<body onload="findhead1()">
<h1>Heading One</h1>
</body>
</html>

更新:编辑

自从我的上一个答案，我找到了更好更简单的解决方案

function search(tableEvent)
{
clearResults()


document.getElementById('loading').style.display = 'block';


var params = 'formAction=SearchStocks';


var elemArray = document.mainForm.elements;
for (var i = 0; i < elemArray.length;i++)
{
var element = elemArray[i];


var elementName= element.name;
if(elementName=='formAction')
continue;
params += '&' + elementName+'='+ encodeURIComponent(element.value);


}


params += '&tableEvent=' + tableEvent;




createXmlHttpObject();


sendRequestPost(http_request,'Controller',false,params);


prepareUpdateTableContents();//function js to handle the response out of scope for this question


}
小开

我也在找。嗯，不完全是。我只想列出所有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);
}

找到解决方案 中数 < / p >

小开

安迪e给出了一个很好的回答。

我会补充，如果你觉得选择所有的子在一些特殊的选择器(这需要发生在我最近)，你可以应用方法“getElementsByTagName()”对任何DOM对象你想要。

举个例子，我需要解析网页的“视觉”部分，所以我做了这个

var visualDomElts = document.body.getElementsByTagName('*');

这绝对不会考虑到头部部分。

小开

对于那些正在使用Jquery的人

$("*").each(function(i,e){console.log(i+' '+e)});
小开

最好的解决方案是使用递归:

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("*");多了大约50%的节点

小开

使用*

var allElem = document.getElementsByTagName("*");
for (var i = 0; i < allElem.length; i++) {
// Do something with all element here
}
小开

我觉得这真的很快

document.querySelectorAll('body,body *').forEach(function(e) {
小开

如果需要检查每个元素，使用var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++);获取所有元素是可以的，但会导致检查或循环重复元素或文本。

下面是一个递归实现，它只检查或循环所有DOM元素的每个元素< >强一次< / >强和append:

(感谢@George Reith的递归回答: 将HTML映射到JSON)

function mapDOMCheck(html_string, json) {
treeObject = {}


dom = new jsdom.JSDOM(html_string) // use jsdom because DOMParser does not provide client-side Window for element access
document = dom.window.document
element = document.querySelector('html')


// Recurse and loop through DOM elements only once
function treeHTML(element, object) {
var nodeList = element.childNodes;


if (nodeList != null) {
if (nodeList.length) {
object[element.nodeName] = []; // IMPT: empty [] array for parent node to push non-text recursivable elements (see below)


for (var i = 0; i < nodeList.length; i++) {
console.log("nodeName", nodeList[i].nodeName);


if (nodeList[i].nodeType == 3) { // if child node is **final base-case** text node
console.log("nodeValue", nodeList[i].nodeValue);
} else { // else
object[element.nodeName].push({}); // push {} into empty [] array where {} for recursivable elements
treeHTML(nodeList[i], object[element.nodeName][object[element.nodeName].length - 1]);
}
}
}
}
}


treeHTML(element, treeObject);


}

提交答案