Question

每，

How to iterate through all attributes in an HTML element?

你得到了一般的解决方案：

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

如何使此通用解决方案更具体，仅提醒数据属性的值。

我需要regex attrib.name还是有更简单的方法？以下是一些包含2个数据属性的示例HTML：

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

Answer 1

如果您不需要低于version 11

的IE，

dataset支持非常好

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

var data = document.querySelector('div').dataset;

for( var i in data )
   console.log(i, data[i])

<div data-foo='1' data-bar='2'></div>

Answer 2

在许多现代浏览器中，我们可以通过.dataset对象上的Node成员访问这些特殊属性。不幸的是，这还不是一个公认的标准，因此我们不会在整个频谱范围内采用这一标准。幸运的是，每个主要浏览器都支持部分，因为这些属性仍然可以使用getAttribute等常用方法访问，也可以在.attributes列表上循环访问。 / p>

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

// 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
}

Answer 3

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

if attrib.name.startswith('data'):
    //do something

Answer 4

_dataToObject = function( dataset ) {
    return Object.keys( dataset ).reduce( function( object, key ) {
        object[ key ] = dataset[ key ]; 
        return object;
    }, {});
}

Answer 5

我在这里有一个可能适合你的概念。

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“data”属性中返回一个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]);
}

循环遍历元素的数据属性

5 个答案:

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