data-set

Exemple 1

1. <button data-toggle-id="calendar">
2.   Show calendar
3. </button>
4. 
   
5. <form id="calendar" hidden>
6.   mois de mai !
7. </form>
8. 
   

1.   document.addEventListener('click', function(event) {
2.     let id = event.target.dataset.toggleId;
3.     if (!id) return;
4. 
   
5.     let elem = document.querySelector(`'#${id}'`);
6.     elem.hidden = !elem.hidden;
7.   });

https://jsbin.com/wagipuj/edit?html,js,output

Exemple 2

1. <div id="menu">

2.   <button data-action="save">Save</button>

3.   <button data-action="load">Load</button>

4.   <button data-action="search">Search</button>

5. </div>

1. class Menu {

2.     constructor(elem) {

3.       this._elem = elem;

4.       

5.     }

6. 
   

7.     save() {

8.       alert('saving');

9.     }

10. 
    

11.     load() {

12.       alert('loading');

13.     }

14. 
    

15.     search() {

16.       alert('searching');

17.     }

18. 
    

19.     onClick(event) {

20.       let action = event.target.dataset.action;

21.       if (action) {

22.         this[action]();

23.       }

24.     };

25.   }

26. 
    

27.   new Menu(menu);

https://jsbin.com/dufunaf/5/edit?html,css,js,console,output

Evolution : comparaison

 

node	element
function buildTable(data) {     var table = document.createElement("table");        var fields = Object.keys(data[0]);   console.log(fields);     var headRow = document.createElement("tr");     fields.forEach(function(field) {       var headCell = document.createElement("th");       headCell.textContent = field;       headRow.appendChild(headCell);     });     table.appendChild(headRow);     data.forEach(function(object) {       var row = document.createElement("tr");       fields.forEach(function(field) {         var cell = document.createElement("td");         cell.textContent = object[field];         if (typeof object[field] == "number")           cell.style.cssText = "background-color:black;color:white;text-align:right;"         row.appendChild(cell);       });       table.appendChild(row);     });     return table;   }   document.body.appendChild(buildTable(PERSON));	function buildTable(data) {   const table = document.createElement("table"),     fields = Object.keys(data[0]);   let template = `<tr><th>${fields[0]}</th><th>${fields[1]}</th><th>${fields[2]}</th></tr>`;   table.insertAdjacentHTML("afterBegin", template);   for (let { name, age, country } of data) {     template = `<tr><td>${name}</td><td>${age}</td><td>${country}</td></tr>`;     table.insertAdjacentHTML("beforEEnd", template);   }   return table; } document.body.appendChild(buildTable(PERSON));
code	code