Ebooks

The dataset tutorial

The dataset tutorial shows how to read and write custom data attributes with using dataset property.

The dataset

The dataset property on the HTMLElement interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM.

The dataset example

The following example demonstrates the usage of the dataset attribute.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <h2>Reading words from a dataset</h2>

    <div data-words="coin, marble, forest, falcon, mountain"></div>

    <div id="output">...</div>
    
    <button id="read">Read</button>

    <script src="main.js"></script>
</body>
</html>

In the example, we have a list of words inside a custom data-words property. The button reads the words and outputs them into another div element.

main.css
button {
    width: 4em; height: 2em;
}

* {
    margin: 10px 10px;
}

This is some basic styling for the document.

main.js
let dataEl = document.querySelector("div[data-words]");
let output = document.getElementById("output");

let btn = document.getElementById("read");
btn.addEventListener('click', () => {

    let mywords = dataEl.dataset.words;
    output.innerHTML = mywords;
});

In the button handler, we read the words and insert them into the output div element.

Express example

In the following example, we create simple web application that sends the data to the document. We use Express framework and Liquid.js template engine.

$ ls -Inode_modules -R
.:
index.js  package.json  package-lock.json  public  views

./public:
main.css  main.js

./views:
home.liquid

These are the contents of the project.

index.js
const express = require("express");
const path = require("path");
const Liquid = require('liquidjs');

const engine = new Liquid();
const app = express();

app.engine('liquid', engine.express());
app.set('views', path.resolve(__dirname, "views"));
app.use("/public", express.static(__dirname + "/public"));
app.set('view engine', 'liquid');

app.get("/words", (req, res) => {

    const words = ['coin', 'marble', 'forest', 'falcon', 'mountain'];
    const data = words.join(', ');

    res.render("home", { data });
});

app.use((req, res) => {
    res.statusCode = 404;
    res.end("404 - page not found");
});

app.listen(3000, () => {

    console.log("Application started on port 3000");
})

This is a simple Express application. It sends a home.liquid template to the client for the /home request. The template also receives the words data.

app.use("/public", express.static(__dirname + "/public"));

Static assets go in the public directory.

views/home.liquid
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>words</title>
    <link rel="stylesheet" href="public/main.css">
</head>
<body>

    <div data-words='{{data}}'></div>

    <div id="output">...</div>
    
    <button id="read">Read</button>

    <script src="public/main.js"></script>
</body>
</html>

Inside the template, we add the data to the data-words property using the {{}} syntax.

public/main.css
button {
    width: 4em; height: 2em;
}

* {
    margin: 10px 10px;
}

We have the same styling.

public/main.js
let dataEl = document.querySelector("div[data-words]");
let output = document.getElementById("output");

let btn = document.getElementById("read");
btn.addEventListener('click', () => {

    let mywords = dataEl.dataset.words;
    output.innerHTML = mywords;
});

The main.js is also unchanged.

In this tutorial, we have worked with the document's dataset property.

You might also be interested in the following related tutorials: JavaScript queryselector tutorial, Document.all tutorial, Element.classList tutorial, Element.innerHtml tutorial, Document.getElementById tutorial, Document.createElement tutorial, Document.createNodeIterator tutorial, Counting child elements in DOM.