📌  相关文章
📜  javascript中的queryselectorall获取数据属性值 - Javascript(1)

📅  最后修改于: 2023-12-03 15:31:47.425000             🧑  作者: Mango

使用 Javascript 的 querySelectorAll 获取数据属性值

在网页开发中，我们常常需要获取 HTML 元素中的数据属性值，以便进行后续的操作。在 Javascript 中，我们可以使用 querySelectorAll 方法来获取指定元素匹配的所有元素，并通过元素对象的 dataset 属性获取元素的数据属性值。

querySelectorAll 方法

querySelectorAll 方法可以在文档中查询指定选择器的所有匹配元素，并返回一个 NodeList 对象。语法如下：

document.querySelectorAll(selector);

其中，selector 参数为一个合法的 CSS 选择器字符串。

dataset 属性

在 HTML5 中，可以通过在元素上添加 data-* 属性来定义自定义的数据，例如：

<div id="example" data-id="123" data-name="John Doe"></div>

以上代码中，我们定义了一个 id 为 example 的 div 元素，并添加了两个数据属性 data-id 和 data-name。我们可以通过 Javascript 中元素对象的 dataset 属性获取这些数据属性的值，例如：

var example = document.querySelector('#example');

console.log(example.dataset.id);     // 输出：123
console.log(example.dataset.name);   // 输出：John Doe

其中，dataset 属性返回一个 DOMStringMap 对象，包含了所有 data-* 属性的键/值对，而这些键/值对的键名即为去掉“data-”前缀的属性名，值则为对应的属性值。

示例代码

以下是一个简单的示例程序，它使用了 querySelectorAll 和 dataset 属性来获取 div 元素中的数据属性值，然后将数据属性值显示在页面上：

<!DOCTYPE html>
<html>
  <head>
    <title>使用 querySelectorAll 获取数据属性值</title>
  </head>
  <body>
    <div id="example1" data-id="123" data-name="John Doe">
      <p>id: <span id="id1"></span></p>
      <p>name: <span id="name1"></span></p>
    </div>
    <div id="example2" data-id="456" data-name="Jane Smith">
      <p>id: <span id="id2"></span></p>
      <p>name: <span id="name2"></span></p>
    </div>
    <script>
      var examples = document.querySelectorAll('[data-id]');

      for (var i = 0; i < examples.length; i++) {
        var example = examples[i];

        var idSpan = example.querySelector('#id' + (i + 1));
        var nameSpan = example.querySelector('#name' + (i + 1));

        idSpan.textContent = example.dataset.id;
        nameSpan.textContent = example.dataset.name;
      }
    </script>
  </body>
</html>

在以上示例程序中，我们首先使用 querySelectorAll 方法获取了所有具有 data-id 属性的 div 元素，然后遍历这些元素，获取它们的数据属性值，并通过修改页面中对应的 span 元素的 textContent 来显示这些值。最终的效果如下图所示：

示例程序效果图

以上示例程序演示了如何使用 querySelectorAll 方法和 dataset 属性来获取 div 元素中的数据属性值，并将这些值显示在页面上。在实际的网页开发中，我们可以根据具体需求灵活使用这些方法来实现各种功能。