💪Les "futurs pro"
installer nodejs/différences avec Chrome
expression-instructions
passage des paramètres
💪💪les "pro" ex-débutants
Objectif
Projet : Afficher le DOM en le parcourant.
Vous devez écrire un programme Affichant les balises d'une page HTML.
Exemple :
- Allez dans n'importe quel site.
- Ouvrez la console (F12)
- Injectez Votre code dans la console
- La hiérarchie de votre page doit s'afficher ! COOL !
Démo
Rappels :
Structure de l'arbre DOM
fonctions utiles :
console.groupCollapsed();
console.groupEnd();
noeud.children pour avoir les enfants d'un nœud.
On utilise for of pour réaliser une boucle.
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 d'une page web !
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);