Select all elements with a "data-xxx" attribute without using jQuery

Issue

Using only pure JavaScript, what is the most efficient way to select all DOM elements that have a certain data- attribute (let's say data-foo).

The elements may be different, for example:

<p data-foo="0"></p><br/><h6 data-foo="1"></h6>

Solution

You can use querySelectorAll:

document.querySelectorAll('[data-foo]');

Answered By - Joe