Javascript: comment faire une boucle à travers tous les éléments DOM sur une page?
J'essaie de faire une boucle sur tous les éléments d'une page, donc je veux vérifier chaque élément qui existe sur cette page pour une classe spéciale.
Alors, comment puis-je dire que je veux vérifier chaque élément?
9 réponses
, Vous pouvez passer un * pour getElementsByTagName() de sorte qu'il sera de retour tous les éléments dans 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 pourriez utiliser querySelectorAll(), si c'est disponible (IE9+, CSS dans IE8), il suffit de trouver 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.
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 revenir beaucoup de nœuds en fonction de la complexité de la page. Même si vous avez besoin de regarder tout ce que quelqu'un peut voir, cela signifie que vous pouvez utiliser
'body *'comme sélecteur pour couper tout le contenuhead.
Cherchait 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 filter.
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
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;
}
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 nécessite pas de créer un tableau pour tous les nœuds, donc plus de lumière sur la mémoire. Plus important encore, il trouve plus de résultats. Je ne suis pas sûr de ces résultats, mais lors du test sur chrome, il trouve environ 50% de nœuds de plus par rapport à document.getElementsByTagName("*");
Pour ceux qui utilisent Jquery
$("*").each(function(i,e){console.log(i+' '+e)});
À 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
}
Andy E. a donné une bonne réponse.
J'ajouterais, si vous sentez de sélectionner tous les childs 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 que vous voulez.
Pour un exemple, j'avais juste besoin d'analyser une 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.
Vous pouvez essayer avec
document.getElementsByClassName('special_class');
Utiliser *
var allElem = document.getElementsByTagName("*");
for (var i = 0; i < allElem.lenght; i++) {
// Do something with all element here
}