DOM: 2020

data-set

Exemple 1

<button data-toggle-id="calendar">
Show calendar
</button>
<form id="calendar" hidden>
mois de mai !
</form>

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

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

Exemple 2

<div id="menu">
<button data-action="save">Save</button>
<button data-action="load">Load</button>
<button data-action="search">Search</button>
</div>

class Menu {
constructor(elem) {
this._elem = elem;
}
save() {
alert('saving');
}
load() {
alert('loading');
}
search() {
alert('searching');
}
onClick(event) {
let action = event.target.dataset.action;
if (action) {
this[action]();
}
};
}
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

high level function

function elt(name, attrs, ...children) {

let dom = document.createElement(name);

for (let attr of Object.keys(attrs)) {

dom.setAttribute(attr, attrs[attr]);

}

for (let child of children) {

dom.appendChild(child);

}

return dom;

}

let text = document.createTextNode("topc");

let u = elt("p",{},...[text]);

document.querySelector(".test").appendChild(u);

const tab = ["lun","mard","mercredi"];

let v = elt("div",{},...tab.map( (jour)=> {

let p = elt("p",{class:"red"})

p.innerHTML = jour;

return p;

} ));

document.querySelector(".map").appendChild(v);

En action

à comparer avec

Différence entre screenX, clientX, pageX

yellow Screen → the full screen of the monitor (screenX/Y)
Position will always be relative to the physical screen's viewport.

Blue Client → the client viewport of the browser (clientX/Y)
If you click in the left top corner the value will always be (0,0) independent on scroll position.

Red Document → the complete document/page (pageX/Y)
Note that pageX/pageY on the UIEvent object are not standardized.

All values are in pixels.

screen snapshot with extended page illustration

Simulateur

https://jsbin.com/dilumuz/3/edit?html,css,js,console,output

DOM

Pages