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

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

这个ref表示我可以通过索引访问它，但没有指定它是否得到很好的支持并可以使用（跨浏览器）

---

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

这将在IE、Firefox和Chrome中工作（有人可以测试其他的吗？——谢谢，@Bryan）：

---

另一种方法是使用以下命令将属性集合转换为数组：

---

如果有人对过滤版本感兴趣，或试图构建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应用程序中，样式标记被小部件广泛操纵。

效率更高

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

---

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

const el=document.querySelector（'div'）；
[…el.attributes].forEach（（attr）=>{
console.log（attr.name+'='+attr.value）；
});
也适用于Opera和Safari。。似乎未定义
elem
。我做错了什么？@AndersonGreen如果你想一想，就会想到你。@AndersonGreen“递归”这个词在这个问题上并不适用。迭代并不意味着递归。你必须自己实现递归。我不确定for循环是否复杂到可以称之为算法。我也不太确定你是从哪里得到这样一个想法的，那就是这需要O（n²）的时间
elem.attributes.length
很可能是O（1），
elem.attributes[i]
肯定是O（1）-所以在我看来，整个事情都是O（n）。但即使我错了，也没关系。如果你对页面上的每一个元素都调用这个函数，那么不管怎样，你都是做错了。见鬼，即使这样，在我生锈的笔记本电脑上，这个页面也只需要8毫秒。这就是jQuery
$。each（）
。简而言之：我完全不在乎这一点的运行时特性。
Array.from(element.attributes).forEach(attr => {
  console.log(`${attr.nodeName}=${attr.nodeValue}`);
})

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]

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