Test CSS !

CSS test

quizz dom

Quizz DOM

Parcours

Voici quelques codes avec parcours de l'arbre du DOM

Code de base
MAP
REDUCE + es6


Testez vous !
Test1
Test2

test

<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

Rappel : element.nodeName donne le nom de l'élément.

Que va afficher le code précedent ?

valeur de l'index : reduce

comparez les index dans les cas suivants

[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
console.log(`${index} : ACC= ${accumulateur}, Cour= ${valeurCourante}`);
  return accumulateur + valeurCourante;
});

avec une valeur initiale :

[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
console.log(`${index} : ACC= ${accumulateur}, Cour= ${valeurCourante}`);
  return accumulateur + valeurCourante;
},1000);

Afficher le nombre de chaque balise du DOM

Ecrire le code JS qui permet d'afficher le nombre de balises par type !

En action :

Injecter le code dans la console d'une page HTML prise au hasard.

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)&&console.log(`la balise ${b} apparaît ${a[b]} fois `);

reduce en action : one more

const promos = [
  { promo: "L3miage", etudiants: ["Dupont", "Whells", "Toto"]},
  { promo: "L2miage", etudiants: ["Dupond", "Pathé"]},
  { promo: "M1miage", etudiants: ["Audu", "Baby"]},
]

const tousEtudiants = promos.reduce(function(prev, curr) {
  return [...prev, ...curr.etudiants];
},[]);

console.log(tousEtudiants.sort());

remarque, ... est bien un opérateur utilisé ici pour remplacer la concaténation.