Is there a simple way to get a list of all elements containing a data-* attribute without using jQuery (and hopefully without iterating the whole DOM-tree) ?

I can find a lot of answers using jQuery but I cannot use it in my project and neither can I find answers using plain Javascript.

For example if I have this HTML:

<input data-mydata="data1">
<input data-mydata="data2">
<div data-mydata="data3"></div>
<div data-mydata="data4"></div>
<input>
<div></div>

and then get a list of all elements, of any kind, that contains data-mydata ?

What I try to achieve is to get data from certain elements for storage based on the data-* as well as the data value.

I know I can use the name attribute with getElementsByName but that is not possible to use in my project either as the elements have names set for other purposes.

And I believe the querySelectorAll only works with CSS (?).

Is there a simple way to get a list of all elements containing a data-* attribute without using jQuery (and hopefully without iterating the whole DOM-tree) ?

I can find a lot of answers using jQuery but I cannot use it in my project and neither can I find answers using plain Javascript.

For example if I have this HTML:

<input data-mydata="data1">
<input data-mydata="data2">
<div data-mydata="data3"></div>
<div data-mydata="data4"></div>
<input>
<div></div>

and then get a list of all elements, of any kind, that contains data-mydata ?

What I try to achieve is to get data from certain elements for storage based on the data-* as well as the data value.

I know I can use the name attribute with getElementsByName but that is not possible to use in my project either as the elements have names set for other purposes.

And I believe the querySelectorAll only works with CSS (?).

• javascript

• 2 document.querySelectorAll(['data-mydata']); – dandavis Commented Jul 19, 2013 at 18:03
• duplicate question: stackoverflow./questions/9496427/… – bokonic Commented Jul 19, 2013 at 18:03
• document.querySelectorAll() is definitely javascript. check out the browser support for it: developer.mozilla/en-US/docs/Web/API/… – pid Commented Jul 19, 2013 at 18:05
• possible duplicate of javascript: select all elements with "data-xxx" attr WITHOUT jQuery – Ja͢ck Commented Jul 19, 2013 at 18:08
• @Jack, thank you. Just removed it. – Sergio Commented Jul 19, 2013 at 18:39

1 Answer 1

It's simply this:

var elements = document.querySelectorAll('[data-mydata]');