Question

我希望能够使用纯javascript检索data-type，这是一个新的HTML5标记名称（或任何自定义标记名称）。我需要访问此数据的上下文来自元素childNodes的循环。

var children = document.getElementById('foo').childNodes;
for(var i=0; i<children.length; i++) {
    var dataType = children[i].dataType //This does not work.
}

是否有一些原型childNodes的方法，以便使用该标记检索的任何元素都附加一个dataType函数，以便上述代码实际上可以工作？

我想我必须使用children[i].outerHTML来获取元素的原始HTML，然后使用正则表达式来实际放置元素中的值。

Answer 1

如果您的意思是从data-*属性获取数据

var children = document.getElementById('foo').childNodes;
var childrenLength = children.length;

for(var i=0; i<childrenLength; i++) {
    var dataType = children[i].getAttribute('data-type');
}

Answer 2

如果您查看有关该主题的Mozilla's docs，您会发现标准定义的方式比.getAttribute更简单：DOMStringMap可以使用{dataset property进行读取3}}

简而言之，这意味着你可以做到这一点

var dataType = children[i].dataset.dataType;

或者您可以将dataset设置为如下所示的变量，当您从元素中获取多个数据属性时这很方便

var dataSet = children[i].dataset,
    dataType = dataSet.dataType;

Javascript获取数据类型标记值

2 个答案: