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

Question

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

这个Element.attributes引用说我可以通过索引访问它，但没有指定它是否被广泛支持并且可用于跨浏览器使用。

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

- Robin Rodricks

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

- Tomalak

---

在Opera和Safari中也能使用。 - Bryan

这个例子对我来说不起作用（http://jsfiddle.net/acLEZ/）。看起来`elem`没有被定义。我在这里做错了什么？ - Anderson Green

如果你花一点时间思考，就会想到答案。 - Tomalak

@AndersonGreen 问题中没有出现“递归”一词。迭代并不意味着递归。您将不得不自己实现递归。 - Tomalak

我不确定一个for循环是否足够复杂，可以称之为算法。我也不确定你从哪里得到这个需要O(n²)时间的概念。elem.attributes.length很可能是O(1)，elem.attributes[i]绝对是O(1) - 所以在我看来整个过程是O(n)。但即使我错了：没关系。如果你为页面上的每个元素都调用它，那么你做错了。该死的，即使在我的旧笔记本电脑上使用jQuery $.each()，这个页面也只需要8毫秒。简而言之：我完全不关心这一点的运行时特性。 - Tomalak

Answer 2

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

Array.from(element.attributes).forEach(attr => {
  console.log(`${attr.nodeName}=${attr.nodeValue}`);
})

- Lloyd

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]

你可以删除连接以检索数组，或者添加一个“style”过滤器，因为在大多数Web应用程序中，样式标签通常由小部件广泛操作。

- N-ate

Answer 4

更高效

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

- Danny Raufeisen

Answer 5

最简单的方法是使用扩展运算符。

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

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

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

- Jens Törnell

---

为什么你要抄袭？不需要抄袭！ - inux

Answer 6

这是一个相当古老的问题，但针对@N-ate的答案，这里提供了一个遵循相同函数式编程方法并返回JS对象的版本，其中键是属性名称，值是属性关联的值：

Array.from(element.attributes)
    .filter(a => a.specified)
    .map(a => ({[a.nodeName]: a.nodeValue}))
    .reduce((prev, curr) => Object.assign(prev || {}, curr))

这将会变成：

<div class="thingy verse" id="my-div" style="color: red;"><p>Hello</p></div>

进入

{
    class: "thingy verse",
    id: "my-div",
    style: "color: red;"
}

- Samuel Prevost