选择所有带有"data-xxx"属性的元素，而不使用jQuery。

8 浏览
0 Comments

选择所有带有"data-xxx"属性的元素，而不使用jQuery。

只使用纯JavaScript，选择具有特定data-属性（比如data-foo）的所有DOM元素的最高效方法是什么。

这些元素可能是不同的，例如：

0

3 答案

0 Comments

问题的出现是因为需要通过属性选择器来选择具有"data-xxx"属性的元素，但是不想使用jQuery来实现。解决方法是使用原生JavaScript的document.querySelectorAll("[data-xxx]")方法来选择具有"data-xxx"属性的所有元素。

document.querySelectorAll("[data-foo]")可以选择具有"data-foo"属性的所有元素。

document.querySelectorAll("[data-foo='1']")只能选择具有值为1的"data-foo"属性的元素。

想要为选择的元素设置值，可以使用.querySelectorAll()返回的NodeList对象。根据Mozilla开发者文档的说明，可以使用.forEach()方法来遍历NodeList对象。需要注意的是，这种方法不适用于IE浏览器，如果需要支持IE浏览器，可以使用普通的for循环来遍历NodeList对象。

所以，通过使用document.querySelectorAll("[data-xxx]")方法可以选择具有"data-xxx"属性的元素，并通过遍历NodeList对象来设置元素的值。

0
0 Comments

问题的出现原因：

问题最初的标题是“Select all elements with a "data-xxx" attribute without using jQuery”，意图是寻找所有具有"data-xxx"属性的元素，但由于一个编辑的错误修改了问题的标题，导致问题的意图发生了变化。

解决方法：

要解决这个问题，可以使用document.querySelectorAll函数来实现。该函数接受一个选择器作为参数，并返回与该选择器匹配的所有元素。

具体的解决方法如下：

document.querySelectorAll('[data-foo]');

这样的话，就可以选择所有具有"data-foo"属性的元素了。

需要注意的是，如果要选择具有带有冒号的属性名，需要在冒号前面加上转义符号“\\”，以确保选择器的正确性。例如：document.querySelectorAll('[attribute\\:name]');

这样就可以选择具有带有冒号的属性名的元素了。

通过使用document.querySelectorAll函数，我们可以方便地选择具有"data-xxx"属性的元素，而无需使用jQuery。如果需要选择具有带有冒号的属性名的元素，则需要在冒号前面加上转义符号以确保选择器的正确性。

0
0 Comments

文章标题：使用纯JavaScript选择具有"data-xxx"属性的所有元素的方法

问题出现的原因：

问题的出现是因为作者想要通过属性选择器获取具有特定值的"data-foo"属性的元素。然而，作者还希望能够将属性值与变量的值进行匹配，以便动态地选择具有特定数据属性的元素。

解决方法：

解决这个问题的方法是使用纯JavaScript而不是jQuery。作者使用了document.querySelectorAll('[data-foo]')来获取具有"data-foo"属性的所有元素的列表。如果要获取具有特定值的"data-foo"属性的元素，作者使用了document.querySelector('[data-foo="2"]')来获取data-foo属性值为"2"的div元素。

然而，当作者想要将属性值与变量的值进行匹配时，作者使用了模板字面量来动态选择具有特定数据属性的元素。作者使用了document.querySelector(`[data-foo="${i}"]`)来选择具有特定data属性值的元素，其中i是一个变量。

需要注意的是，即使不将值写在字符串中，它也会被转换为字符串。作者举了一个例子，如果将data-foo属性值写为data-foo=1，并在Chrome开发者工具中检查元素，它将显示为data-foo="1"。可以通过在控制台中执行console.log(typeof document.querySelector(`[data-foo="${i}"]`).dataset('dataFoo'))来进行验证，其中'dataFoo'是dataset属性的驼峰命名。

还有一些参考链接，包括MDN上关于"data-*"属性和使用数据属性的文档。

代码示例：

document.querySelectorAll('[data-foo]');
document.querySelector('[data-foo="2"]');
var i = 2;
document.querySelector(`[data-foo="${i}"]`);
console.log(typeof document.querySelector(`[data-foo="${i}"]`).dataset('dataFoo'));

参考链接：

- [MDN: data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)

- [MDN: Using data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)

0