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

Question

I'd like to get all elements with a specific data- attribute, but I need to manipulate they individually. Check my code:

HTML

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

JavaScript

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

Answer 1

You are getting all of them, but that means you're getting a nodeList , an array-like object containing all the elements that has to be iterated over

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

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

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

Answer 2

Below is how you can get all elements with a selector attribute and create an onclick listener for each element.

Run the snippet, and click the "click me -- A" or "click me -- B" links for a demo:

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

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

You can also use .addEventListener('click', someFunction) instead of .onclick = someFunction .