JavaScript: attributi di dati e API dataset

In JavaScript possiamo accedere agli attributi di dati degli elementi utilizzando un' API specifica.

dataset ci permette di operare sugli attributi di dati sia in lettura che in scrittura. Consideriamo il seguente elemento HTML:

<article id="post" data-index="0"></article>

Per leggere il valore dell'attributo data-index scriveremo:

'use strict';

const article = document.querySelector('#post');
const index = article.dataset.index;

console.log(index); // 0

Per modificare o impostare il valore dell'attributo data-index scriveremo:

'use strict';

const article = document.querySelector('#post');


article.dataset.index = 1;

const index = article.dataset.index;

console.log(index); // 1

Se gli attributi di dati vengono generati dinamicamente, alcuni di loro potrebbero non essere presenti. Verificare la loro presenza equivale di fatto a verificare la presenza di una proprietà in un oggetto.

'use strict';

const article = document.querySelector('#post');

if(article.dataset.index) {
    //...
}