12

每，

如何遍历 HTML 元素中的所有属性？

你得到一般的解决方案：

for (var i = 0; i < elem.attributes.length; i++) {
  var attrib = elem.attributes[i];
  if (attrib.specified) {
    alert(attrib.name + " = " + attrib.value);
  }
}

我如何使这个通用解决方案更具体，只提醒 data- 属性的值。

我需要正则表达式 attrib.name 还是有更简单的方法？这是一些带有 2 个 data- 属性的示例 HTML：

<div id='universals' data-path='/zz/' data-load='1'></div>
4

5 回答 5

22

dataset如果下面不需要IE，支持非常好version 11

对数据集属性进行简单的“for-in”迭代：

var dataset = document.querySelector('div').dataset;

for( var d in dataset)
   console.log(d, dataset[d])
<div data-foo='1' data-bar='2'></div>

于 2017-03-25T21:10:46.223 回答
6

.dataset在许多现代浏览器中，我们可以通过对象上的成员访问这些特殊属性Node。不幸的是，这还不是一个公认的标准，因此我们看不到它在整个范围内都被采用。幸运的是，每个主要浏览器都有部分支持，因为这些属性仍然可以使用常见的方法（如getAttribute，以及循环遍历.attributes列表）访问。

下面的代码显示了第二种方法：

// Reference to our element
var element = document.getElementById("universals"), attr;

// Cycle over each attribute on the element
for (var i = 0; i < element.attributes.length; i++) {
    // Store reference to current attr
    attr = element.attributes[i];
    // If attribute nodeName starts with 'data-'
    if (/^data-/.test(attr.nodeName)) {
        // Log its name (minus the 'data-' part), and its value
        console.log(
            "Key: " + attr.nodeName.replace(/^data-/, ''),
            "Val: " + attr.nodeValue
        );
    }
}

小提琴：http: //jsfiddle.net/pGGqf/14/

您应该会发现这种方法适用于所有主流浏览器，甚至可以追溯到 IE6。.dataset同样，在支持该成员的浏览器中，这不是必需的。该.dataset对象提供了一些额外的功能，因此您可以根据需要自由地对其进行特征检测：

if (element.dataset) {
    // Browser supports dataset member
} else {
    // Browser does not support dataset member
}
于 2012-12-26T21:30:24.877 回答
6 
_dataToObject = function( dataset ) {
    return Object.keys( dataset ).reduce( function( object, key ) {
        object[ key ] = dataset[ key ]; 
        return object;
    }, {});
}
于 2015-10-04T18:48:34.547 回答
1

如果您不想使用正则表达式，您可以尝试

if attrib.name.startswith('data'):
    //do something
于 2012-12-26T21:32:08.343 回答
-1

我在这里有一个可能对你有用的概念。

var el = document.getElementById("universals");
for(var i=0;i<el.attributes.length;i++){
    if((el.attributes[i].nodeName+"").indexOf("data-")>-1){
        var key=(el.attributes[i].nodeName+"").substring(5);
        var value=el.attributes[i].value;
        alert(key+": "+value);
    }
}

这是我提出的基本想法，似乎效果很好。我还创建了一个函数，它使用上面的这个方法从 HTMLElements“数据”属性中返回一个 Name-Value-Pair 对象。

function data2Obj(id){
  var obj={};
  var el=document.getElementById(id);
  for(var i=0;i<el.attributes.length;i++){
    if((el.attributes[i].nodeName+"").indexOf("data-")>-1){
      var key=(el.attributes[i].nodeName+"").substring(5);
      var value=el.attributes[i].value;
      if(value.toLowerCase()=="true")value=true;
      else if(value.toLowerCase()=="false")value=false;
      else if((parseInt(value)+"")==value)value=parseInt(value);
      obj[key]=value;
    }
  }
  return obj;
}

这可以很容易地修改为接受一个类或任何其他选择 HTMLElements 的方法。

如果您获取此函数的返回并遍历对象，您应该得到您想要的结果。

var datas = data2Obj("universal");
for(var k in datas){
  alert(k+": "+datas[k]);
}
于 2014-05-28T20:09:18.557 回答