JavaScript 如何获取元素的数据属性

在这篇文章中，我们将学习如何使用JavaScript获取元素的数据属性。给定一个HTML文档，任务是使用JavaScript选择元素的数据属性。下面有几种解决这个问题的方法：

使用dataset属性
使用.getAttribute()方法

我们将讨论获取元素数据属性的两种方法。

方法：

首先，选择具有数据属性的元素。
我们可以使用dataset属性来访问数据属性，或者使用.getAttribute()方法通过键入特定的属性名来选择它们。

在下面的示例中，我们将使用getElementById()方法，该方法将返回具有给定ID的元素。parseInt()函数用于接受字符串和基数参数，并将它们转换为整数。JSON.stringify()方法用于将对象转换为JSON字符串。这个方法对于将对象转换为字符串很有帮助。

示例1： 此示例使用dataset属性来获取元素的数据属性。

<!DOCTYPE HTML>
<html>
<head>
    <title>
        How to get the data attributes
        of an element using JavaScript ?
    </title>
</head>
 
<body align="center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px; 
              font-weight: bold;">
    </p>
 
    <span data-typeId="123" data-name="name"
          data-points="10"
          data-important="true"
          id="span">
          This is the Element.
      </span>
 
        <br>
        <br>
        <button onclick="GFG_Fun()"> click here </button>
        <p id="GFG_DOWN" style="font-size: 20px; 
              font-weight: bold; 
              color:green;">
        </p>
 
        <script>
            let el_up = document.getElementById('GFG_UP');
            let el_down = document.getElementById('GFG_DOWN');
            let input = document.getElementById('span');
            el_up.innerHTML = "Click on the button to get "
                + "the data attributes of element.";
 
            function GFG_Fun() {
                let jsonData = JSON.stringify({
                    id: parseInt(input.dataset.typeid),
                    points: parseInt(input.dataset.points),
                    important: input.dataset.important,
                    dataName: input.dataset.name
                });
                el_down.innerHTML = jsonData;
            }
        </script>
</body>
</html>

输出：

JavaScript 如何获取元素的数据属性

示例2： 此示例使用 .getAttribute()方法 来获取元素的数据属性。

<!DOCTYPE HTML>
<html>
<head>
    <title>
        How to get the data attributes
        of an element using JavaScript ?
    </title>
</head>
 
<body align="center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <p id="GFG_UP" style="font-size: 15px; 
              font-weight: bold;">
    </p>
 
    <span data-typeId="123" data-name="name"
          data-points="10"
          data-important="true" id="span">
          This is thecElement.
      </span>
 
    <br>
    <br>
    <button onclick="GFG_Fun()"> click here </button>
    <p id="GFG_DOWN" style="font-size: 20px; 
              font-weight: bold; 
              color:green;">
    </p>
 
    <script>
        let el_up = document.getElementById('GFG_UP');
        let el_down = document.getElementById('GFG_DOWN');
        let input = document.getElementById('span');
        el_up.innerHTML = "Click on the button to get "
            + "the data attributes of element.";
 
        function GFG_Fun() {
            let jsonData = JSON.stringify({
                id: parseInt(input.getAttribute('data-typeId')),
                points: parseInt(input.getAttribute('data-points')),
                important: input.getAttribute('data-important'),
                dataName: input.getAttribute('data-name')
            });
            el_down.innerHTML = jsonData;
        }
    </script>
</body>
</html>