javascript - element.attributes 是否包含自定义数据属性？

Question

我想知道是否存在浏览器一致性，哪些元素存储在属性数组中。

是否通过“$('#elm')[0].attributes”找到所有“data-xxx”属性？

例如，属性集合是否包含以下所有数据属性：

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

我需要的是一种使用 jQuery 将所有相关属性从 input[type=submit] 移动到按钮元素的方法。

Answer 1

我认为数据属性存在于所有浏览器中，即使它们在非 HTML 5 浏览器的情况下被忽略

在这里，有人设法从 IE6 中的元素中读取它们HTML5 自定义数据属性在 IE 6 中“有效”吗？

@编辑的答案

刚刚发现 jquery data() 适用于 html5 和非 html5 浏览器；

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

Answer 2

目前没有多少浏览器对dataset属性提供原生支持，这是访问data-*属性的官方标准方式。这会随着时间的推移而改善，但目前还不足以支持使用（请参阅http://caniuse.com/#search=dataset了解更多信息）。

但是，正如您所知，所有浏览器都可以支持data-*普通属性。但是在没有dataset属性的情况下，没有一种简单的方法可以获取所有data-*属性。

幸运的是，有一个提供此功能的 JQuery 插件。请参阅此处了解更多信息：http ://www.orangesoda.net/jquery.dataset.html

Answer 3

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);
    }