Select ALL elements with specific data attribute Javascript?

Question

With jquery, I've got the following code:

$('a[data-hello]').click(function(){ = That select all "a" elements with "data-hello".

I'm trying to make this with raw Javascript. I stop here:

document.querySelectorAll("data-hello").onclick = function() {

(btw, theres a way to select all the A elements with data-hello and not all with data-hello? o.O)

But querySelectorAll returns a Array. Because of this, it only works if I determine a position. This way:

document.querySelectorAll("data-hello")[5].onclick = function() {

But I want ALL ELEMENTS, not specific elements, like with jQuery. I cant use jQuery.

It is so simple with Jquery :( I must make a "for" to wade through all the positions in JS? Is this necessary? sorry I do not understand...

What I want to do:

I want to get the data attribute value of the element that is clicked. I use this for this inside the function and, then, I applied another function that add a class in a specific element. Basically, there is buttons with classes in data attribute value. This classes will be applied to a specific element.

"But querySelectorAll returns a Array." - No it doesn't, it returns a NodeList. (Which yes, you would then have to loop through - which is what jQuery methods like .click() do behind the scenes.) — nnnnnn
– nnnnnn, Commented Jan 5, 2014 at 0:19
The difference between an Array and a NodeList? Well, the main difference that you need to know about is that a NodeList doesn't have Array methods like .pop(), .forEach(), etc. (A NodeList is an array-like object, so you can use some array methods via Array.prototype and .call() or .apply().) — nnnnnn
– nnnnnn, Commented Jan 5, 2014 at 0:22
Unfortunately, NodeList isn't a fully-fledged Array, which caught me out. This Mozilla Developer Network (MDN) article explains it very well. Btw, googling mdn <html|css|javascript term> is a great way to begin debugging - I do so thousands of times a day =) — Henry Blyth
– Henry Blyth, Commented Jan 5, 2014 at 0:25

Guffa · Accepted Answer · 2014-01-05 00:45:21Z

3

Put the array (actually a NodeList) of elements in a variable and loop through them to set the event handler on each of them. That's what the jQuery methods do to apply something to all elements in a jQuery object. There is no way around the loop, with jQuery it's just hidden within the methods. You can use the same selector syntax as in jQuery with querySelectorAll.

var arr = document.querySelectorAll("a[data-hello]");
var f = function() {
  // do something
};
for (var i = 0; i < arr.length; i++) {
  arr[i].onclick = f;
}

edited Jan 5, 2014 at 0:45

answered Jan 5, 2014 at 0:14

Guffa

703k112 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henry Blyth · Accepted Answer · 2014-01-05 00:21:36Z

1

querySelectorAll accepts a string of comma-separated CSS selectors, just like jQuery, so you can give it the same string: 'a[data-hello]'.

The difference between native and jQuery that you are running into is in calling methods on the elements returned. jQuery returns a jQuery object, which has methods that often loop over all the elements, .click() being one such methods. You need to replicate that with the array of elements that querySelectorAll is returning by looping over the array and applying the same handler to each element's onclick property.

Try this:

var myElements = document.querySelectorAll("a[data-hello]");
Array.prototype.forEach.call(myElements, function (element) {
    element.onclick = function () {
        // Your onclick handler code goes here.
        console.log('clicked', element);
    };
});

edited Jan 5, 2014 at 0:21

answered Jan 5, 2014 at 0:14

Henry Blyth

1,7701 gold badge15 silver badges26 bronze badges

6 Comments

Niet the Dark Absol Over a year ago

NodeList has no method forEach.

Henry Blyth Over a year ago

Right you are - forgot about that! I use abstraction libraries like lodash so regularly. Fixed it now =)

Henry Blyth Over a year ago

@SergeiZahharenko Thanks! Do you mean this bit? Array.prototype.forEach.call

Melo Over a year ago

Wow! So different.. Thank you, Henry, really! Thanks for explaining too! Happy new year!

Guffa Over a year ago

Note: The forEach method doesn't exist in older browsers, like IE8.

|

Sergei Zahharenko · Accepted Answer · 2014-01-05 00:17:52Z

0

as simple as that:

var dataElems = document.querySelectorAll("[data-hello]")
for (var i=0;i<dataElems.length;i++) { 
    dataElems[i].onclick = function(i,v) {
        alert(this.innerHTML)        
    }
}

example http://jsfiddle.net/acrashik/W86k8/

edited Jan 5, 2014 at 0:17

answered Jan 5, 2014 at 0:12

Sergei Zahharenko

1,52412 silver badges16 bronze badges

3 Comments

Melo Over a year ago

This dont works for me. "But querySelectorAll returns a Array. Because of this, it only works if I determine a position."

Darren Kopp Over a year ago

@PedroMelo you know you can just iterate through each element, which is what jquery does. document.querySelectorAll("[data-hello]").forEach(function(v) { v.onclick = function() {}});

Henry Blyth Over a year ago

@DarrenKopp Unfortunately your code won't work, for the same reason mine didn't at first: forEach isn't a method of NodeList, which querySelectorAll returns. It's a sorry state of affairs for chaining methods =(

Collectives™ on Stack Overflow

Select ALL elements with specific data attribute Javascript?

3 Answers 3

Comments

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related