web-dev-qa-db-fra.com

Javascript: comment parcourir TOUS les éléments DOM d'une page?

J'essaie de parcourir tous les éléments d'une page. Je souhaite donc vérifier chaque élément de cette page pour une classe spéciale.

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

javascriptdom
138
Florian Müller

Vous pouvez transmettre un * à getElementsByTagName() afin 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), uniquement pour rechercher 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 supportent maintenant foreach on NodeList . Cela signifie que vous pouvez directement mettre en boucle les éléments au lieu d’écrire votre propre boucle.

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

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

216
Andy E

Je cherchais pareil. 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 filtrage.

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

29
traditional

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

Comme toujours, la meilleure solution consiste à 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, elle est donc plus légère 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 détecte environ 50% de nœuds en plus par rapport à document.getElementsByTagName("*");.

7
Ilya Gazman

Pour ceux qui utilisent Jquery

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

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>

UPDATE: EDIT

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

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

    }
2
shareef

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

J'ajouterais, si vous souhaitez 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.

Par exemple, je devais simplement analyser la partie "visuelle" de la page Web, alors je viens de faire ceci

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

Cela ne prendra jamais en considération la partie principale.

2
korvus

Utilisez *

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

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

0
Jimish Gamit