数据集教程
最后修改于 2023 年 8 月 24 日
数据集教程演示了如何使用 dataset 属性来读取和写入自定义数据属性。
数据集
HTMLElement 接口上的 dataset 属性提供了对元素上设置的所有自定义数据属性 (data-*) 的读/写访问。这种访问在 HTML 和 DOM 中都可用。
数据集示例
下面的示例演示了 dataset 属性的用法。
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>
在示例中，我们在自定义 data-words 属性中有一个单词列表。按钮读取单词并将其输出到另一个 div 元素。
main.css
button {
width: 4em; height: 2em;
}
* {
margin: 10px 10px;
}
这是文档的一些基本样式。
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;
});
在按钮处理程序中，我们读取单词并将它们插入到输出 div 元素中。
Express 示例
在下面的示例中，我们创建了一个简单的 Web 应用程序，它将数据发送到文档。我们使用了 Express 框架和 Liquid.js 模板引擎。
$ ls -Inode_modules -R .: index.js package.json package-lock.json public views ./public: main.css main.js ./views: home.liquid
这些是项目的内容。
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");
})
这是一个简单的 Express 应用程序。它为 /home 请求将 home.liquid 模板发送到客户端。该模板还接收 words 数据。
app.use("/public", express.static(__dirname + "/public"));
静态资源放在 public 目录中。
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>
在模板中，我们使用 {{}} 语法将数据添加到 data-words 属性。
public/main.css
button {
width: 4em; height: 2em;
}
* {
margin: 10px 10px;
}
我们有相同的样式。
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;
});
main.js 也未更改。
在本文中，我们使用了文档的 dataset 属性。