The dataset tutorial
last modified August 24, 2023
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.
<!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.
button {
width: 4em; height: 2em;
}
* {
margin: 10px 10px;
}
This is some basic styling for the document.
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.
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.
<!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.
button {
width: 4em; height: 2em;
}
* {
margin: 10px 10px;
}
We have the same styling.
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 article we have worked with the document's dataset property.
