HTML数据属性与JavaScript交互：利用dataset实现前端数据存储与动态操作

一、引言

在前端开发里，咱们经常会碰到要存储和操作数据的情况。有时候，我们需要把一些额外的数据跟 HTML 元素关联起来，方便在 JavaScript 里使用。这时候，HTML 数据属性和 dataset 就派上用场啦。它们能让我们轻松地在 HTML 和 JavaScript 之间传递和操作数据，让网页变得更灵活、更强大。接下来，咱就一起深入了解一下它们。

二、HTML 数据属性基础

2.1 什么是 HTML 数据属性

HTML 数据属性是 HTML5 引入的一个新特性，它允许我们在 HTML 元素上自定义属性来存储额外的数据。这些属性以 data- 开头，后面跟着自定义的名称。比如说，我们可以给一个 <div> 元素添加一个 data-id 属性来存储这个元素的唯一标识符。

2.2 示例代码

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 数据属性示例</title>
</head>

<body>
    <!-- 给 div 元素添加 data-id 和 data-name 属性 -->
    <div id="myDiv" data-id="123" data-name="John Doe">
        这是一个带有数据属性的 div 元素
    </div>
</body>

</html>

在这个例子里，我们给 <div> 元素添加了 data-id 和 data-name 两个数据属性，分别存储了元素的 ID 和名称。

三、JavaScript 中的 dataset

3.1 什么是 dataset

在 JavaScript 里，我们可以通过元素的 dataset 属性来访问 HTML 元素上的所有数据属性。dataset 是一个对象，它的属性名就是 HTML 数据属性去掉 data- 前缀后的部分，属性值就是数据属性的值。

3.2 示例代码

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 中的 dataset 示例</title>
</head>

<body>
    <div id="myDiv" data-id="123" data-name="John Doe">
        这是一个带有数据属性的 div 元素
    </div>
    <script>
        // 获取 div 元素
        const div = document.getElementById('myDiv');
        // 访问 data-id 属性
        const id = div.dataset.id;
        // 访问 data-name 属性
        const name = div.dataset.name;
        console.log(`ID: ${id}, Name: ${name}`);
    </script>
</body>

</html>

在这个例子中，我们通过 div.dataset.id 和 div.dataset.name 分别获取了 data-id 和 data-name 属性的值，并将它们打印到控制台。

四、利用 dataset 实现前端数据存储

4.1 数据存储示例

我们可以利用 dataset 来存储一些简单的数据，比如用户的信息、商品的价格等。下面是一个存储商品信息的示例：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用 dataset 存储商品信息</title>
</head>

<body>
    <ul>
        <!-- 每个 li 元素存储一个商品的信息 -->
        <li data-id="1" data-name="iPhone 14" data-price="999">iPhone 14</li>
        <li data-id="2" data-name="MacBook Pro" data-price="1999">MacBook Pro</li>
        <li data-id="3" data-name="iPad Air" data-price="599">iPad Air</li>
    </ul>
    <script>
        // 获取所有 li 元素
        const items = document.querySelectorAll('li');
        // 遍历每个 li 元素
        items.forEach(item => {
            const id = item.dataset.id;
            const name = item.dataset.name;
            const price = item.dataset.price;
            console.log(`ID: ${id}, Name: ${name}, Price: $${price}`);
        });
    </script>
</body>

</html>

在这个例子中，我们给每个 <li> 元素添加了 data-id、data-name 和 data-price 三个数据属性，用来存储商品的 ID、名称和价格。然后通过 JavaScript 遍历所有 <li> 元素，获取并打印出每个商品的信息。

4.2 数据更新示例

除了存储数据，我们还可以通过 dataset 来更新数据。下面是一个更新商品价格的示例：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用 dataset 更新商品价格</title>
</head>

<body>
    <ul>
        <li data-id="1" data-name="iPhone 14" data-price="999">iPhone 14</li>
        <li data-id="2" data-name="MacBook Pro" data-price="1999">MacBook Pro</li>
        <li data-id="3" data-name="iPad Air" data-price="599">iPad Air</li>
    </ul>
    <button id="updateButton">更新价格</button>
    <script>
        // 获取更新按钮
        const updateButton = document.getElementById('updateButton');
        // 给按钮添加点击事件监听器
        updateButton.addEventListener('click', () => {
            // 获取所有 li 元素
            const items = document.querySelectorAll('li');
            // 遍历每个 li 元素
            items.forEach(item => {
                // 将价格增加 100
                const newPrice = parseInt(item.dataset.price) + 100;
                // 更新 data-price 属性
                item.dataset.price = newPrice;
                console.log(`New price for ${item.dataset.name}: $${newPrice}`);
            });
        });
    </script>
</body>

</html>

在这个例子中，我们给一个按钮添加了点击事件监听器，当点击按钮时，会遍历所有 <li> 元素，将每个商品的价格增加 100，并更新 data-price 属性。

五、利用 dataset 实现动态操作

5.1 根据数据属性改变样式

我们可以根据数据属性的值来动态改变元素的样式。下面是一个根据商品价格改变颜色的示例：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据数据属性改变样式</title>
    <style>
        /* 定义不同价格区间的颜色 */
        .low-price {
            color: green;
        }

        .medium-price {
            color: orange;
        }

        .high-price {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li data-id="1" data-name="iPhone 14" data-price="999">iPhone 14</li>
        <li data-id="2" data-name="MacBook Pro" data-price="1999">MacBook Pro</li>
        <li data-id="3" data-name="iPad Air" data-price="599">iPad Air</li>
    </ul>
    <script>
        // 获取所有 li 元素
        const items = document.querySelectorAll('li');
        // 遍历每个 li 元素
        items.forEach(item => {
            const price = parseInt(item.dataset.price);
            if (price < 1000) {
                item.classList.add('low-price');
            } else if (price < 2000) {
                item.classList.add('medium-price');
            } else {
                item.classList.add('high-price');
            }
        });
    </script>
</body>

</html>

在这个例子中，我们根据商品的价格给每个 <li> 元素添加了不同的类名，从而改变了它们的颜色。

5.2 动态创建元素并添加数据属性

我们还可以动态创建元素并给它们添加数据属性。下面是一个动态创建商品列表的示例：

<!-- HTML 技术栈 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态创建元素并添加数据属性</title>
</head>

<body>
    <ul id="productList"></ul>
    <script>
        // 获取商品列表元素
        const productList = document.getElementById('productList');
        // 定义商品数据
        const products = [
            { id: 1, name: 'iPhone 14', price: 999 },
            { id: 2, name: 'MacBook Pro', price: 1999 },
            { id: 3, name: 'iPad Air', price: 599 }
        ];
        // 遍历商品数据
        products.forEach(product => {
            // 创建 li 元素
            const li = document.createElement('li');
            // 设置 li 元素的文本内容
            li.textContent = product.name;
            // 添加数据属性
            li.dataset.id = product.id;
            li.dataset.name = product.name;
            li.dataset.price = product.price;
            // 将 li 元素添加到商品列表中
            productList.appendChild(li);
        });
    </script>
</body>

</html>

在这个例子中，我们动态创建了 <li> 元素，并给它们添加了数据属性，然后将它们添加到商品列表中。

六、应用场景

6.1 表单验证

在表单验证中，我们可以利用数据属性来存储一些验证规则，比如最小长度、最大长度等。然后在 JavaScript 中根据这些规则进行验证。

6.2 动态菜单

在创建动态菜单时，我们可以利用数据属性来存储菜单项的链接、图标等信息，然后在 JavaScript 中根据这些信息动态生成菜单。

6.3 数据可视化

在数据可视化中，我们可以利用数据属性来存储数据点的坐标、数值等信息，然后在 JavaScript 中根据这些信息绘制图表。

七、技术优缺点

7.1 优点

简单易用：HTML 数据属性和 dataset 非常容易使用，不需要复杂的配置和代码。
数据与元素关联：可以将数据直接关联到 HTML 元素上，方便在 JavaScript 中访问和操作。
兼容性好：HTML5 的数据属性和 dataset 在现代浏览器中都有很好的支持。

7.2 缺点

数据类型有限：数据属性的值只能是字符串类型，如果需要存储其他类型的数据，需要进行额外的处理。
数据存储容量有限：数据属性的值不能太大，否则会影响性能。

八、注意事项

8.1 数据属性命名

数据属性的名称应该遵循一定的命名规范，避免使用特殊字符和大写字母，建议使用小写字母和连字符。

8.2 数据类型转换

由于数据属性的值是字符串类型，在使用时需要进行数据类型转换，比如将字符串转换为数字。

8.3 性能问题

如果数据属性的值太大或者使用过多的数据属性，会影响页面的性能，需要注意优化。

九、文章总结

通过本文的介绍，我们了解了 HTML 数据属性和 dataset 的基本概念和用法。利用它们，我们可以轻松地在 HTML 和 JavaScript 之间传递和操作数据，实现前端数据存储和动态操作。在实际开发中，我们可以根据具体的需求选择合适的应用场景，同时注意技术的优缺点和注意事项，以提高开发效率和代码质量。

敲码拾光专注于编程技术，涵盖编程语言、代码实战案例、软件开发技巧、IT前沿技术、编程开发工具，是您提升技术能力的优质网络平台。