Question

我希望获得具有特定data-属性的所有元素，但我需要单独操作它们。检查我的代码：

HTML

<div data-something></div>
<div data-something></div>

的JavaScript

document.querySelectorAll("[data-something]").onclick = function() {
    ...
}

Answer 1

你得到了所有这些，但这意味着你得到一个nodeList，一个类似数组的对象，包含所有必须迭代的元素

var elements = document.querySelectorAll("[data-something]");

for (var i=0; i<elements.length; i++) {

    elements[i].addEventListener('click', function() {
    ...
    }, false);
}

Answer 2

下面是如何使用selector属性获取所有元素并为每个元素创建onclick侦听器。

运行代码段，然后点击＆＃34;点击我 - A＆＃34;或者＆＃34;点击我 - B＆＃34;演示链接：

＆＃13;

var elements = document.querySelectorAll('[data-something]');

Array.prototype.forEach.call(elements, function (element) {
    element.onclick = function () { 
        alert(element.innerHTML); 
    };
});

＆＃13;

<div data-something>click me -- A</div>
<div data-something>click me -- B</div>

＆＃13;

您也可以使用.addEventListener('click', someFunction)代替.onclick = someFunction。

如何使用VanillaJS获取具有选择器属性的所有元素？

2 个答案: