Javascript: Comment parcourir TOUS les éléments DOM sur une page?

J'essaie de faire une boucle sur TOUS les éléments d'une page, je veux donc vérifier chaque élément qui existe sur cette page pour une classe spéciale.

Alors, comment dire que je veux vérifier CHAQUE élément?

Vous pouvez passer un *à getElementsByTagName()pour qu'il renvoie tous les éléments d'une page:

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

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

Notez que vous pouvez utiliser querySelectorAll(), s'il est disponible (IE9 +, CSS dans IE8), pour trouver simplement des éléments avec une classe particulière.

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

Cela accélérerait certainement les choses pour les navigateurs modernes.

Les navigateurs prennent désormais en charge foreach sur NodeList . Cela signifie que vous pouvez directement boucler les éléments au lieu d'écrire votre propre boucle for.

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

Note de performance - Faites de votre mieux pour définir ce que vous recherchez. Un sélecteur universel peut renvoyer beaucoup de nœuds en fonction de la complexité de la page. Même si vous avez besoin de regarder à travers tout ce que quelqu'un peut voir, cela signifie que vous pouvez utiliser 'body *'comme sélecteur pour supprimer tout le headcontenu.

Je cherchais la même chose. Eh bien, pas exactement. Je voulais seulement lister tous les nœuds DOM.

var currentNode,
    ni = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT);

while(currentNode = ni.nextNode()) {
    console.log(currentNode.nodeName);
}

Pour obtenir des éléments avec une classe spécifique, nous pouvons utiliser la fonction de filtre.

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

Solution trouvée sur MDN

Comme toujours, la meilleure solution est d'utiliser la récursivité:

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

Contrairement à d'autres suggestions, cette solution ne vous oblige pas à créer un tableau pour tous les nœuds, donc c'est plus léger sur la mémoire. Plus important encore, il trouve plus de résultats. Je ne sais pas quels sont ces résultats, mais lors des tests sur chrome, il trouve environ 50% de nœuds en plus par rapport àdocument.getElementsByTagName("*");

Voici un autre exemple sur la façon dont vous pouvez parcourir un document ou un élément:

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

Pour ceux qui utilisent Jquery

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

Andy E. a donné une bonne réponse.

J'ajouterais que si vous avez envie de sélectionner tous les enfants dans un sélecteur spécial (ce besoin m'est arrivé récemment), vous pouvez appliquer la méthode "getElementsByTagName ()" sur n'importe quel objet DOM de votre choix.

Pour un exemple, je devais simplement analyser la partie "visuelle" de la page Web, donc je viens de faire ceci

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

Cela ne prendra jamais en considération la partie tête.

à partir de ce lien
référence 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>

MISE À JOUR: MODIFIER

depuis ma dernière réponse, j'ai trouvé une meilleure solution plus simple

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

    }

Utilisation *

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

je pense que c'est vraiment rapide

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

Obtenir tous les éléments en utilisant var all = document.getElementsByTagName("*"); for (var i=0, max=all.length; i < max; i++); est acceptable si vous devez vérifier chaque élément, mais cela entraînera la vérification ou la mise en boucle d'éléments ou de texte répétitifs.

Voici une implémentation de récursivité qui vérifie ou boucle chaque élément de tous les éléments DOM une seule fois et ajoute:

(Crédits à @George Reith pour sa réponse sur la récursivité ici: Mapper HTML en 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);

}

Vous pouvez essayer avec document.getElementsByClassName('special_class');