3

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 (?).

Mike-O
  • 844
  • 1
  • 11
  • 16
  • 2
    document.querySelectorAll(['data-mydata']); – dandavis Jul 19 '13 at 18:03
  • duplicate question: http://stackoverflow.com/questions/9496427/how-to-get-elements-by-attribute-selector-w-native-javascript-w-o-queryselector – bokonic Jul 19 '13 at 18:03
  • `document.querySelectorAll()` is definitely javascript. check out the browser support for it: https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll#Browser_compatibility – compid Jul 19 '13 at 18:05
  • possible duplicate of [javascript: select all elements with "data-xxx" attr WITHOUT jQuery](http://stackoverflow.com/questions/7084557/javascript-select-all-elements-with-data-xxx-attr-without-jquery) – Ja͢ck Jul 19 '13 at 18:08
  • @Jack, thank you. Just removed it. – Sergio Jul 19 '13 at 18:39

1 Answers1

8

It's simply this:

var elements = document.querySelectorAll('[data-mydata]');
Ja͢ck
  • 170,779
  • 38
  • 263
  • 309