Question

我需要JavaScript代码来遍历HTML元素中的填充属性。

这个Element.attributes参考说我可以通过索引访问它，但是没有指定它是否得到很好的支持并且可以使用（跨浏览器）。

还是其他任何方式？（不使用任何框架，如jQuery / Prototype）

Answer 1

这适用于IE，Firefox和Chrome（有人可以测试其他人吗？ - 谢谢，@ Bryan）：

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

编辑：IE迭代所讨论的DOM对象的所有属性，无论它们是否实际上已经在HTML中定义。

您必须查看attrib.specified布尔属性以确定该属性是否确实存在。 Firefox和Chrome似乎也支持这个属性：

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

Answer 2

另一种方法是使用Array.from将属性集合转换为数组：

Array.from(element.attributes).forEach(attr => {
  // process attr
})

Answer 3

如果有人对过滤版本感兴趣，或者正在尝试构建CSS属性选择器，请转到：

let el = document.body;
Array.from(el.attributes)
    .filter(a => { return a.specified && a.nodeName !== 'class'; })
    .map(a => { return '[' + a.nodeName + '=' + a.textContent + ']'; })
    .join('');

//outputs: "[name=value][name=value]

您当然可以删除联接以检索数组或为“样式”添加过滤器，因为在大多数Web应用程序中，样式标记被窗口小部件广泛操作。

Answer 4

效率更高

Array.prototype.forEach.call(elm.attributes, attr => console.log(attr))

Answer 5

最简单的方法是使用传播运算符。

const el = document.querySelector('div');

[...el.attributes].forEach((attr) => {
  console.log(attr.name + ' = ' + attr.value);
});

<div class="foo" id="bar"></div>

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

5 个答案: