Javascript: come eseguire il ciclo di tutti gli elementi DOM su una pagina?

Sto cercando di eseguire il loop su TUTTI gli elementi di una pagina, quindi voglio controllare ogni elemento che esiste in questa pagina per una class speciale.

Quindi, come posso dire che voglio controllare OGNI elemento?

Puoi passare un * a getElementsByTagName() modo che restituisca tutti gli elementi in una pagina:

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

Si noti che è ansible utilizzare querySelectorAll() , se disponibile (IE9 +, CSS in IE8), per trovare solo elementi con una particolare class.

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

Ciò accelererebbe certamente le cose per i browser moderni.


I browser ora supportano foreach su NodeList . Ciò significa che puoi eseguire il loop degli elementi direttamente anziché scrivere il tuo loop.

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

Nota sulle prestazioni : fai del tuo meglio per individuare ciò che stai cercando. Un selettore universale può restituire molti nodes a seconda della complessità della pagina. Anche se hai bisogno di guardare attraverso tutto ciò che qualcuno può vedere, significa che puoi usare 'body *' come selettore per tagliare tutto il contenuto della head .

Stavo cercando lo stesso. Bene, non esattamente. Volevo solo elencare tutti i nodes DOM.

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

Per ottenere elementi con una class specifica, possiamo usare la funzione 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); } 

Soluzione trovata su MDN

Ecco un altro esempio su come puoi scorrere un documento o un 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 

Come sempre la soluzione migliore è usare la ricorsione:

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

A differenza di altri suggerimenti, questa soluzione non richiede la creazione di un array per tutti i nodes, quindi è più leggero sulla memoria. Ancora più importante, trova più risultati. Non sono sicuro di quali siano questi risultati, ma quando si esegue il test su Chrome trova circa il 50% in più di nodes rispetto a document.getElementsByTagName("*");

Per coloro che usano Jquery

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

da questo link
riferimento javascript

   A Simple Page    

Heading One

UPDATE: EDIT

dalla mia ultima risposta ho trovato una soluzione più semplice e più semplice

 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. ha dato una buona risposta.

Vorrei aggiungere, se ti senti di selezionare tutti i child in un selettore speciale (che mi è successo di recente), puoi applicare il metodo “getElementsByTagName ()” su qualsiasi object DOM che desideri.

Per un esempio, avevo solo bisogno di analizzare la parte “visiva” della pagina web, quindi l’ho appena fatto

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

Questo non prenderà mai in considerazione la parte della testa.

Puoi provare con document.getElementsByClassName('special_class');

Usa *

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