Select elements with data attribute not using jQuery

Question

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

document.querySelectorAll() is definitely javascript. check out the browser support for it: developer.mozilla.org/en-US/docs/Web/API/… — compid
– compid, Commented Jul 19, 2013 at 18:05
possible duplicate of javascript: select all elements with "data-xxx" attr WITHOUT jQuery — Ja͢ck
– Ja͢ck, Commented Jul 19, 2013 at 18:08

Ja͢ck · Accepted Answer · 2013-07-19 18:07:56Z

8

It's simply this:

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

Collectives™ on Stack Overflow

Select elements with data attribute not using jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related