Does element.attributes contain custom data-attributes?

Question

I was wondering if there is browser consistency what elements are stored in the attributes array.

Is all "data-xxx" attributes found through "$('#elm')[0].attributes"?

For example does the attributes-collection contain all the data-attributes below:

 <input type="submit" value="Go" data-validation="foo" data-widgetId="bar">

What I need is a way of moving all relevant attributes from an input[type=submit] to a button-element with jQuery.

Yeah .attr() rocks but it doesn't give me a object with key/value pairs to loop through. — Jens, Apr 13 '11 at 11:25
i update your question.see the **edit** part..if it is not what u want then delete . — xkeshav, Apr 13 '11 at 12:08

score 1 · Answer 1 · edited May 23 '17 at 11:47

I think the data attributes are present in all browsers even if they are ignored in the case of non HTML 5 browsers

Here someone managed to read them from an element in IE6 Do HTML5 custom data attributes “work” in IE 6?

@edited answer

just found that jquery data() works with both html5 and non html5 browers;

http://www.sluniverse.com/ffn/index.php/2011/02/using-html5s-data-attributes-with-jquery/

example of looping through all data attributes;

<input type="text" id="x" data-a="valuea", data-b="valueb" />
$.each($('#x').data(), function(key, value) { 
  console.log('key is', key);
  console.log('value is', value);
});            

prints         

key is a
value is valuea
key is b
value is valueb

score 0 · Answer 2 · answered Apr 13 '11 at 19:10

0

Browser support information regarding .attributes HERE

    var attrs = $("input[type=submit]")[0].attributes;
    for(var i=0;i<attrs.length;i++) {
        alert(attrs[i].nodeName + " = " + attrs[i].nodeValue);
    }

answered Apr 13 '11 at 19:10

ChrisThompson

1,998
12
17

I don't see how this answers my question. Yes I could test it like this in every browser I could imagine but I asked this question to see if anyone had already done that. But thanks anyway. – Jens Apr 19 '11 at 11:06

score 0 · Answer 3 · answered Apr 19 '11 at 11:17

Not many browsers currently have native support for the dataset property, which is the offical standard way to access data-* attributes. This will improve over time, but for now it's not well enough supported to use (see http://caniuse.com/#search=dataset for more).

However as you know all browsers can support data-* as normal attributes. But in the absence of the dataset property, there isn't an easy way to grab all the data-* attributes.

Fortunately, there is a JQuery plugin which provides this functionality. See here for more info: http://www.orangesoda.net/jquery.dataset.html

Does element.attributes contain custom data-attributes?

3 Answers3