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

Question

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>

Keep in mind that document.querySelectorAll does not work on IE7. You would have to create a fallback script which would walk the DOM tree and checking for attribute in each tag (actually i have no idea how fast querySelectorAll is, and would go for manual check of tags). — tereško
– tereško, Commented Aug 16, 2011 at 21:06
@hay not at all you can even select these elements in pure css too. — Knu
– Knu, Commented Aug 17, 2011 at 10:05
@JamesHay because not every environment, company, site, coding standard, what have you, allows for the use of jQuery. jQuery is not irreplaceable. — Carnix
– Carnix, Commented Jun 22, 2017 at 16:25
@Carnix Agreed. It would no longer make sense to use jQuery unless you were already using it, even then I'd probably opt-out. 6 years ago it was a lot more common to have jQuery in your site, supporting IE5-8 was more common, and jQuery provided the abstractions do this in a simple one liner. — James Hay
– James Hay, Commented Jun 23, 2017 at 7:01
I still dont see any answer that really works on different data- elements, ie: data-foo=0 and data-bar=1 and data-app="js" and data-date="20181231" — Alex
– Alex, Commented Dec 18, 2018 at 13:44

Joe · Accepted Answer · 2011-08-16 20:29:20Z

716

You can use querySelectorAll:

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

answered Aug 16, 2011 at 20:29

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jeremy Over a year ago

Perfect, thanks! Semi-related note: if you want to select an attribute with a colon in the name, you need to escape the colon (at least in Chrome) like so: querySelectorAll('[attribute\\:name]') (see: code.google.com/p/chromium/issues/detail?id=91637)

user128511 Over a year ago

this doesn't actually answer the title of the question. I don't want to select "data-foo". I want to select "data-*" as in "data-foobar", "data-bar", "data-name-i-dont-know"

robinCTS Over a year ago

@gman The original title's intent was inadvertently changed with this edit. I've restored it back now.

LuBre Over a year ago

document.querySelectorAll("[data-foo='1']") should be document.querySelector("[data-foo='1']")

Joseph Marikle · Accepted Answer · 2011-08-16 20:30:14Z

488

document.querySelectorAll("[data-foo]")

will get you all elements with that attribute.

document.querySelectorAll("[data-foo='1']")

will only get you ones with a value of 1.

answered Aug 16, 2011 at 20:30

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

2 Comments

Steven Aguilar Over a year ago

How can you set the values for the elements you get?

Joseph Marikle Over a year ago

@StevenAguilar .querySelectorAll() returns a NodeList. As noted in that documentation, you can iterate over the collection using .forEach(). Note that this is a non-IE solution: developer.mozilla.org/en-US/docs/Web/API/…. If you need to support IE, you'll have to just loop over the NodeList using a regular for loop.

Xan · Accepted Answer · 2022-11-27 22:20:43Z

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

to get list of all elements having attribute data-foo

If you want to get element with data attribute which is having some specific value e.g

<div data-foo="1"></div>
<div data-foo="2"></div>

and I want to get div with data-foo set to "2"

document.querySelector('[data-foo="2"]')

But here comes the twist ... what if I want to match the data attirubte value with some variable's value? For example, if I want to get the elements where data-foo attribute is set to i

var i=2;

so you can dynamically select the element having specific data element using template literals

document.querySelector(`[data-foo="${i}"]`)

Note even if you don't write value in string it gets converted to string like if I write

<div data-foo=1></div>

and then inspect the element in Chrome developer tool the element will be shown as below

<div data-foo="1"></div>

You can also cross verify by writing below code in console

console.log(typeof document.querySelector(`[data-foo="${i}"]`).dataset('dataFoo'))

why I have written 'dataFoo' though the attribute is data-foo reason dataset properties are converted to camelCase properties

I have referred below links:

Uwe Keim · Accepted Answer · 2017-04-15 21:50:55Z

20

Try it → here

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <p data-foo="0"></p>
            <h6 data-foo="1"></h6>
            <script>
                var a = document.querySelectorAll('[data-foo]');

                for (var i in a) if (a.hasOwnProperty(i)) {
                    alert(a[i].getAttribute('data-foo'));
                }
            </script>
        </body>
    </html>

edited Apr 15, 2017 at 21:50

Uwe Keim

40.9k61 gold badges193 silver badges308 bronze badges

answered Aug 16, 2011 at 20:46

shawndumas

1,43315 silver badges17 bronze badges

3 Comments

NVRM Over a year ago

Using hasOwnProperty is the best answer for me so far in 2016, this is very fast regarding other ways of iteration Mdn hasOwnProperty

png Over a year ago

NodeList from querySelectorAll() is iterable (though not an array). Looping with for in will iterate over the length and item properties. Instead, use for of to iterate over properties designed to be iterated over

Kinesis Over a year ago

How should i do if i want to get the tag value once if found the tag i want buy using querySelectorALL ?

Ronnie Smith · Accepted Answer · 2022-10-26 22:53:55Z

3

Native JavaScript's querySelector and querySelectorAll methods can be used to target the element(s). Use a template string if your dataset value is a variable.

var str = "term";
var term = document.querySelectorAll(`[data-type=${str}]`);
console.log(term[0].textContent);

var details = document.querySelector('[data-type="details"]');
console.log(details.textContent);

<dl>
  <dt data-type="term">Thing</dt>
  <dd data-type="details">The most generic type.</dd>
</dl>

answered Oct 26, 2022 at 22:53

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

Comments

Heinrich Ulbricht · Accepted Answer · 2011-08-16 21:03:37Z

2

Here is an interesting solution: it uses the browsers CSS engine to to add a dummy property to elements matching the selector and then evaluates the computed style to find matched elements:

It does dynamically create a style rule [...] It then scans the whole document (using the much decried and IE-specific but very fast document.all) and gets the computed style for each of the elements. We then look for the foo property on the resulting object and check whether it evaluates as “bar”. For each element that matches, we add to an array.

edited Aug 16, 2011 at 21:03

answered Aug 16, 2011 at 20:53

Heinrich Ulbricht

10.4k5 gold badges59 silver badges97 bronze badges

2 Comments

Heinrich Ulbricht Over a year ago

Right, I removed the hint about old browsers.

shawndumas Over a year ago

yeah easy to miss the tag. because it is html5 we are all suggesting document.querySelectorAll (and the data-* attribute is html5 specific too).

score -3 · Accepted Answer · 2011-08-16 22:31:48Z

-3

While not as pretty as querySelectorAll (which has a litany of issues), here's a very flexible function that recurses the DOM and should work in most browsers (old and new). As long as the browser supports your condition (ie: data attributes), you should be able to retrieve the element.

To the curious: Don't bother testing this vs. QSA on jsPerf. Browsers like Opera 11 will cache the query and skew the results.

Code:

function recurseDOM(start, whitelist)
{
    /*
    *    @start:        Node    -    Specifies point of entry for recursion
    *    @whitelist:    Object  -    Specifies permitted nodeTypes to collect
    */

    var i = 0, 
    startIsNode = !!start && !!start.nodeType, 
    startHasChildNodes = !!start.childNodes && !!start.childNodes.length,
    nodes, node, nodeHasChildNodes;
    if(startIsNode && startHasChildNodes)
    {       
        nodes = start.childNodes;
        for(i;i<nodes.length;i++)
        {
            node = nodes[i];
            nodeHasChildNodes = !!node.childNodes && !!node.childNodes.length;
            if(!whitelist || whitelist[node.nodeType])
            {
                //condition here
                if(!!node.dataset && !!node.dataset.foo)
                {
                    //handle results here
                }
                if(nodeHasChildNodes)
                {
                    recurseDOM(node, whitelist);
                }
            }
            node = null;
            nodeHasChildNodes = null;
        }
    }
}

You can then initiate it with the following:

recurseDOM(document.body, {"1": 1}); for speed, or just recurseDOM(document.body);

Example with your specification: http://jsbin.com/unajot/1/edit

Example with differing specification: http://jsbin.com/unajot/2/edit

edited Aug 16, 2011 at 22:31

answered Aug 16, 2011 at 22:24

user1385191

6 Comments

ShreevatsaR Over a year ago

What is the litany of issues with querySelectorAll?

Sean_A91 Over a year ago

I would also love to hear about these issues.

brasofilo Over a year ago

Now, we'll never know which litany was that. One more chapter for the Eternal Mysteries from SO

dman Over a year ago

downvoting this. It is completely over coded and unnecessary with the querySelectorAll api

Kim Skogsmo Over a year ago

A little over the top for the question maybe, but it's a well coded solution, in pure vanilla, as the OP asked. If you didn't already know how slow document.querySelectorAll is compared to the numerous other ways you can iterate over and find elements, you shouldn't have downvoted this. I think it's a cool demonstration of what is possible,

|

Brian · Accepted Answer · 2011-08-17 09:50:30Z

-4

var matches = new Array();

var allDom = document.getElementsByTagName("*");
for(var i =0; i < allDom.length; i++){
    var d = allDom[i];
    if(d["data-foo"] !== undefined) {
         matches.push(d);
    }
}

Not sure who dinged me with a -1, but here's the proof.

http://jsfiddle.net/D798K/2/

edited Aug 17, 2011 at 9:50

answered Aug 16, 2011 at 20:29

Brian

2,78116 silver badges12 bronze badges

6 Comments

Loktar Over a year ago

your mostly "right" just not correct. Im pretty sure someone gave you the -1 because your doing alot of extra work to get the elements, and then putting the collection in an array. I didnt give the -1 just dislike when theres no explanation to one.

shawndumas Over a year ago

expensive (all elements on the page), also use the array literal notation (i.e. []), and on top of it, it does not work. see for yourself --> jsbin.com/ipisul/edit#javascript,html

user1385191 Over a year ago

Though the OP is using HTML 5 anyways, getElementsByTagName with a global (*) selector is broken in older IE builds. This is where a recursive DOM search gets the job done. There is also no "data-foo" property on an ElementNode that's mapped from the data-foo attribute. You're looking for the dataset object (ie: node.dataset.foo.

Brian Over a year ago

@shawndumas - it appears whatever you were having was a PEBKAC. jsfiddle.net/D798K/2. It works. Ultimately, I'd -1 myself for this answer anyways - I missed the words "most efficient" in the OP's question...

shawndumas Over a year ago

@Brian - does the jsbin.com/ipisul one work for you? cause your jsfiddle one is not working in my (work-place demanded) ie9...

|

Collectives™ on Stack Overflow

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

8 Answers 8

4 Comments

2 Comments

Comments

3 Comments

Comments

2 Comments

6 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

2 Comments

Comments

3 Comments

Comments

2 Comments

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related