Javascript: Como percorrer TODOS os elementos DOM em uma página?

Eu estou tentando fazer um loop sobre todos os elementos em uma página, então eu quero verificar cada elemento que existe nesta página para uma class especial.

Então, como eu digo que eu quero verificar todos os elementos?

Você pode passar um * para getElementsByTagName() para que ele retorne todos os elementos em uma página:

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

Observe que você pode usar querySelectorAll() , se estiver disponível (IE9 +, CSS no IE8), para localizar apenas elementos com uma determinada class.

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

Isso certamente aceleraria as coisas para os navegadores modernos.


Navegadores agora suportam foreach em NodeList . Isso significa que você pode fazer o loop dos elementos diretamente em vez de escrever seu próprio loop.

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

Nota de desempenho - Faça o seu melhor para definir o que você está procurando. Um seletor universal pode retornar muitos nós, dependendo da complexidade da página. Mesmo que você precise olhar através de tudo que alguém possa ver, isso significa que você pode usar 'body *' como o seletor para cortar todo o conteúdo da head .

Estava procurando o mesmo. Bem, não exatamente. Eu só queria listar todos os nós DOM.

 var currentNode, ni = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT); while(currentNode = ni.nextNode()) { console.log(currentNode.nodeName); } 

Para obter elementos com uma class específica, podemos usar a function de filtro.

 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); } 

Solução encontrada no MDN

Aqui está outro exemplo de como você pode percorrer um documento ou um elemento:

 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 

Como sempre, a melhor solução é usar recursion:

 loop(document); function loop(node){ // do some thing with the node here var nodes = node.childNodes; for (var i = 0; i  0){ loop(nodes[i]); } } 

Ao contrário de outras sugestões, esta solução não exige que você crie uma matriz para todos os nós, então é mais leve na memory. Mais importante, encontra mais resultados. Não tenho certeza de quais são esses resultados, mas ao testar no chrome, ele encontra cerca de 50% mais nós em comparação com document.getElementsByTagName("*");

Para aqueles que estão usando o Jquery

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

a partir deste link
referência javascript

   A Simple Page    

Heading One

ATUALIZAÇÃO: EDIT

desde a minha última resposta eu encontrei melhor solução mais simples

 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 } 

Andy E. deu uma boa resposta.

Gostaria de acrescentar, se você sentir para selecionar todos os filhos em algum seletor especial (isso precisa acontecer comigo recentemente), você pode aplicar o método “getElementsByTagName ()” em qualquer object DOM que você deseja.

Por exemplo, eu precisava apenas analisar parte “visual” da página da web, então eu apenas fiz isso

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

Isso nunca levará em consideração a parte da cabeça.

Você pode tentar com document.getElementsByClassName('special_class');

Use *

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