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

javascript html dom
DrANoel picture DrANoel · Aug 16, 2011 · Viewed 267.4k times · Source

Using only 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 tag elements. 

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

Answer

Joe picture Joe · Aug 16, 2011

You can use querySelectorAll:

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

Related questions

How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
How to make JavaScript execute after page load?

I'm executing an external script, using a <script> inside <head>. Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript …

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More