js 获取元素自定义属性|极客笔记

js 获取元素自定义属性

在网页开发中，经常会需要为元素添加自定义属性来存储一些额外的信息，以便于在后续的操作中使用。通过JavaScript可以很方便地获取这些自定义属性的值，并进行相应的操作。本文将详细介绍如何使用JavaScript来获取元素的自定义属性。

通过getAttribute()方法获取自定义属性的值

在HTML中，我们可以为元素添加自定义属性，例如：

<div id="element" data-custom="deepinout"></div>

在JavaScript中，我们可以通过getElementById()方法获取到该元素，然后使用getAttribute()方法来获取自定义属性的值，示例如下：

var element = document.getElementById('element');
var customValue = element.getAttribute('data-custom');

console.log(customValue); // 输出 deepinout

上述示例中，我们首先获取id为element的元素，然后使用getAttribute()方法获取data-custom属性的值并打印输出。

通过dataset属性获取自定义属性的值

除了使用getAttribute()方法之外，还可以使用dataset属性来获取元素的自定义属性值。dataset属性是一个DOMStringMap对象，可以方便地访问元素的data-*属性。示例如下：

var element = document.getElementById('element');
var customValue = element.dataset.custom;

console.log(customValue); // 输出 deepinout

上述示例中，我们直接通过dataset属性获取元素的data-custom属性值，并将其打印输出。

获取所有具有data-*属性的元素

有时候，我们需要获取页面中所有具有data-*属性的元素以便进行进一步的处理。我们可以通过querySelectorAll()方法配合属性选择器来实现这一目的。示例如下：

var elements = document.querySelectorAll('[data-*]');

elements.forEach(function(element) {
  console.log(element.dataset);
});

上述示例中，我们使用querySelectorAll(‘[data-]’)来获取所有具有data-属性的元素，然后通过forEach()方法遍历这些元素并打印输出它们的dataset属性。

使用示例

下面我们来演示一个完整的示例，展示如何使用JavaScript获取元素自定义属性的值。假设我们有如下HTML结构：

<div id="person" data-name="John Doe" data-age="30"></div>

我们要获取该元素的data-name和data-age属性值，并将其输出到页面上。示例代码如下：

var person = document.getElementById('person');
var name = person.dataset.name;
var age = person.dataset.age;

var output = document.createElement('div');
output.innerHTML = 'Name: ' + name + ', Age: ' + age;

document.body.appendChild(output);

运行以上示例代码后，页面会添加一个新的div元素，内容为Name: John Doe, Age: 30。

通过以上介绍，我们已经了解了如何使用JavaScript来获取元素的自定义属性的值。无论是使用getAttribute()方法还是dataset属性，都能方便地实现这一目的。在开发过程中，根据实际情况选择合适的方法来获取自定义属性值，让页面与JavaScript脚本实现更好的交互效果。

js 获取元素自定义属性