title: Select elements with data attribute *not* using jQuery
body: <p>Is there a simple way to get a list of all elements containing a <code>data-*</code> attribute <strong>without</strong> using jQuery (and hopefully without iterating the whole DOM-tree) ?</p>
  
  <p>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.</p>
  
  <p>For example if I have this HTML:</p>
  
  <pre><code>&lt;input data-mydata="data1"&gt;
  &lt;input data-mydata="data2"&gt;
  &lt;div data-mydata="data3"&gt;&lt;/div&gt;
  &lt;div data-mydata="data4"&gt;&lt;/div&gt;
  &lt;input&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and then get a list of all elements, of any kind, that contains <code>data-mydata</code> ?</p>
  
  <p>What I try to achieve is to get data from certain elements for storage based on the data-* as well as the data value.</p>
  
  <p>I know I can use the <code>name</code> attribute with <code>getElementsByName</code> but that is not possible to use in my project either as the elements have names set for other purposes.</p>
  
  <p>And I believe the <code>querySelectorAll</code> only works with CSS (?).</p>