Pages

Parcours du DOM

Objectif

If you’re learning JavaScript, the first thing you should learn (after understanding the basics like variables, functions, etc.) is to alter the DOM. This is one of the things you do daily as a frontend developer.

Projet  : Afficher le DOM en le parcourant.

Vous devez écrire un programme Affichant les balises d'une page HTML.

Exemple : 

  1. Allez dans n'importe quel site.
  2. Ouvrez la console (F12)
  3. Injectez Votre code dans la console
  4. La hiérarchie de votre page doit s'afficher ! COOL ! 

Démo

En injectant mon code directement dans la console, la hiérarchie de la page s'affiche !

Rappels : 

Structure de l'arbre DOM

fonctions utiles :   

console.groupCollapsed(); 
console.groupEnd();
noeud.children pour avoir les enfants d'un noeud.
On utilise for of pour réaliser une boucle.

Cours

https://dupontdom.blogspot.com/p/3-deplacer.html

Objectif final : 

A la fin du cours : pouvoir compter le nombre de balises de chaque type :

Exemple : mettre dans la console( F12), le code suivant et exécuter :


Code à copier/coller dans la console :

allTag=(a=>{let b=[],c={};return _explore=(a=>{for(let c of a.children)b.push(c.nodeName),_explore(c)}),_explore(a),_getWordCnt=(a=>{return a.reduce(function(a,b){return a[b]=a[b]+1||1,a},[])}),c=_getWordCnt(b),_sort=(a=>{let b=[],c=Object.keys(a).sort((b,c)=>a[c]-a[b]);for(var d of c)b[d]=a[d];return b}),_sort(c)});let a=allTag(document.body);for(var b in a)a.hasOwnProperty(b)&&document.body.insertAdjacentHTML("afterbegin",`<p>la balise ${b} apparaît ${a[b]} fois `);allTag(document.body);