Javascript Girl
  1. Javascript Girl
  3. Renvoie un tableau de tous les éléments DOM, triés par profondeur
Intereting Posts
AngularJS push item à l'indice premier ou 0 de $ scope array JavaScript pour la date prévue pour le lendemain au format dd-mm-aa Algorithme: extrait le sous-ensemble basé sur la somme des propriétés Javascript change l'élément de fond QuerySelectorAll n'a pas fonctionné mais querySelector a fait D3 – utilisant des cordes pour les tiques de l'axe Création d'un bouton dynamique avec événement de clic en JavaScript La transformation d'injection de gulp ne fonctionne pas Extraire du texte à partir de HTML tout en préservant les nouvelles lignes d'élément au niveau du bloc Comment dessiner un ovale en toile html5? Ajouter un hash d'URL lorsque vous cliquez sur l'option d'amorçage modal bootstrap Regex alphanumérique javascript Cochez toutes les cases à cocher dans la page via les outils de développement L'utilisation de browserHistory.push pour modifier l'itinéraire de façon dynamique ne fonctionne pas avec le routeur réactif v4 La fonction attr () de jQuery casse html avec des caractères spéciaux html?

Renvoie un tableau de tous les éléments DOM, triés par profondeur

En Javascript Comment créer un tableau de tous les éléments du DOM, commandé par leur profondeur, donc quelque chose comme ça … 

<body> <1stChild> <1stGrandchild> <2ndChild> <3rdChild> <2ndGrandchild> <3rdGrandchild> <1stGreatgrandchild> <2stGreatgrandchild> <4thGrandchild> <4thChild> <etc etc>

Ressemblerait à ça … 

 ["body", "1stChild", "2ndChild", "...", "lastChild", "1stGrandchild", "...", "lastGrandchild", "1stGreatgrandchild", "...", "lastGreatgrandchild" "etc. etc."]

J'ai une solution jQuery mais je voudrais un javascript pur

Cela modifie la walkTheDOM() de CrockfordTheDOM walkTheDOM() pour accomplir ce dont vous avez besoin. 

 var output = [], currentCount = 0, depth = 0; function walkTheDOM(node, func) { currentCount++; depth++; func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; } depth--; } function getDepths(node) { if (node.nodeType !== 3) { output.push ({ node: node, depth: depth, encountered: currentCount }); } } walkTheDOM(document.body, getDepths); output.sort(function(a, b) { return a.depth === b.depth ? a.encountered - b.encountered : a.depth - b.depth; }); console.log(output); 
 <div class="first"> <div class="second"> <div class="third"></div> <div class="fourth"> <div class="fifth"></div> </div> </div> <div class="sixth"></div> <div class="seventh"> <div class="eighth"></div> </div> <div class="ninth"></div> </div> <div class="tenth"></div>

D'accord, je l'ai compris, c'était très simple à la fin. 

  // Every Element in the DOM. var allElements = document.getElementsByTagName('*'), // All the Element's children sorted by depth, // ie. body, then body's children, grandchildren, // so on and so forth. sortedByDepth = []; // for every element for(var i = 0; i<allElements.length; ++i) { // grab Its children var allChildren = allElements[i].children; // for every grabbed child for(var j = 0; j<allChildren.length; ++j){ // Add it to the sortedByDepth array sortedByDepth = sortedByDepth.concat(allChildren[j]); } } console.log(sortedByDepth);