Select items with data * not * attribute using jQuery

Question

Is there an easy way to get a list of all elements containing the data-* attribute without using jQuery (and hopefully without repeating the entire DOM tree)?

I can find many answers using jQuery, but I can not use it in my project, and I can not find answers using simple 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 type containing data-mydata ?

I am trying to get data from certain items to be stored based on data- *, as well as the value of the data.

I know that I can use the name attribute with getElementsByName , but this cannot be used in my project, because the elements have names set for other purposes.

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

Answer 1

It's simple:

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