使用querySelector查询DOM的数据属性 - JavaScript

在网页中，很多元素都会有一些数据属性，比如data-前缀的属性。我们可以使用JavaScript的querySelector()方法来查询这些元素，并操作它们的数据属性。

查询数据属性

我们可以使用querySelector()方法来查询元素的数据属性。具体方式是在选择器中加上属性选择器[attribute]，其中attribute为数据属性的名称。例如，如果我们要查询一个数据属性为"test"的div元素，则可以这样写：

const element = document.querySelector('div[data-test]');

这样，element就是符合条件的第一个div元素。

我们也可以选取特定值的数据属性。例如，我们可以查询一个数据属性为"foo"并且值为"bar"的div元素，方式如下所示：

const element = document.querySelector('div[data-foo="bar"]');

操作数据属性

一旦我们查询到了一个元素的数据属性，就可以对它们进行操作了。我们可以通过getAttribute()和setAttribute()方法来读取和修改元素的数据属性。

读取数据属性：

const value = element.getAttribute('data-test');
console.log(value); // 输出数据属性的值

修改数据属性：

element.setAttribute('data-test', 'new value');

示例代码

下面是一个完整的示例代码，它查询了数据属性为"test"的第一个div元素，并修改了它的数据属性值：

const element = document.querySelector('div[data-test]');
const value = element.getAttribute('data-test');
console.log(value); // 输出数据属性的值
element.setAttribute('data-test', 'new value');

以上就是使用querySelector()方法查询DOM元素的数据属性的方法介绍。