MAp en action

let tag = [];

explore = (node) => {
    for (let elt of node.children) {
            tag.push(elt.nodeName);
            explore(elt);
      }
    }

explore(document.body); //

getEleCnt = (arr) => {
      return arr.reduce(function(prev,next){
         prev.has(next) ? prev.set(next,prev.get(next) + 1) :prev.set(next,1);        
        return prev;
      },new Map());
    }
 
let allCntEle = getEleCnt(tag);

for(let [u, r] of allCntEle.entries())
console.log(`${u}: ${r}`);

Class en action


HTML : 

<article class="td">
   <section> ...</section>
   <section> ... </section>
</article>

CSS



.hide {
   overflow : hidden;
   opacity:0;
   max-height : 0px;
   transition:all 2s ease;
   padding : 10px;
}

article>section+section {
   max-height : 300px;
   overflow : hidden;
   opacity:1;
   background-color : black;
   color : white;
   padding : 10px;
   transition:all 2s ease;
}

JS

class tdHandler {

      constructor(el) { // el = article
          this.el= el;
     }

     init() {
      this.el.addEventListener("click", () => this.action(), false);
      return this;
     }
    
    action( ) {
       this.el.lastElementChild.classList.toggle('hide');
       return this;
    } 
};

 Array.from(document.querySelectorAll('.td'), (el) =>{
  let h = new tdHandler(el).init().action();
});

Plus d'infos »

Parcours du Dom

allTag = (node) =>{

    let tag = [],
        allEle = {};


    _explore = (node) => {
      for (let elt of node.children) {
            tag.push(elt.nodeName);
            _explore(elt);
      }
    }


    _explore(node);
 
    _getWordCnt = (arr) => {
      return arr.reduce(function(prev,next){
        prev[next] = (prev[next] + 1) || 1;
        return prev;
      },{});
    }
 
    allEle = _getWordCnt(tag);

    //allEle {div:2,p:10}


    console.log(Object.keys(allEle).map(key => `${key}*${allEle[key]} `));

   console.log(`La balise la plus utilisée est : ${Object.keys(allEle).reduce((keya, keyb) =>allEle[keya] > allEle[keyb] ? keya : keyb)}`);

    let all = Object.keys(allEle).sort((keya, keyb) => allEle[keyb] - allEle[keya]);


    console.log("par ordre de présence  ** ");
    for (var b of all) {
         console.log(` ${b} ${allEle[b]} ` );
    }

 
    return allEle;


}


let a = allTag(document.body);


for (var b in a) {
  if (a.hasOwnProperty(b)) {
    console.log(`la balise ${b} apparaît ${a[b]} fois  ` );
  }
}


Parcours du dom

ES2015
Before ES2015
byTagName = (node, tagName) => {
    const found = [];
    tagName = tagName.toUpperCase();
   
   _explore = (node) => {
      for (let elt of node.childNodes) {
     
          if (elt.nodeType == document.ELEMENT_NODE)
            if (elt.nodeName == tagName)
             found.push(elt);
            _explore(elt);
      }
    }

    _explore(node);
    return found;
}
  function byTagName(node, tagName) {
    var found = [];
    tagName = tagName.toUpperCase();

    function explore(node) {
      for (var i = 0; i < node.childNodes.length; i++) {
        var child = node.childNodes[i];
        if (child.nodeType == document.ELEMENT_NODE)
          if (child.nodeName == tagName)
            found.push(child);
          explore(child);
      }
    }

    explore(node);
    return found;
  }

code fichier↯ JS Bin on jsbin.com

Amélioration du code

code fichier⍖ JS Bin on jsbin.com
Inscription à : Articles (Atom)