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

【问题标题】：How to iterate through all attributes in an HTML element?如何遍历 HTML 元素中的所有属性？
【发布时间】：2010-10-24 02:53:14
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html dom

【解决方案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 迭代 all 相关 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);
    }
}

【讨论】：

也适用于 Opera 和 Safari。
This example isn't working for me。 elem 似乎没有定义。我在这里做错了什么？
@AndersonGreen 如果你想一想，它就会来找你。
@AndersonGreen 问题中没有出现“递归”一词。交互并不意味着递归。您必须自己实现递归。
我不确定 for 循环是否足够复杂，可以将其称为算法。我也不太确定你从哪里得到这将花费 O(n²) 时间的概念。 elem.attributes.length 很可能是 O(1)，elem.attributes[i] 肯定是 O(1) - 所以在我看来，整个事情是 O(n )。但即使我错了：没关系。如果您为页面上的每个元素调用它，那么无论如何您都做错了。天啊，即使这样，在我生锈的笔记本电脑上，这个页面也只需要 8 毫秒。这就是 jQuery $.each()。简而言之：我完全不在乎这个位的运行时特性。

【解决方案2】：

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

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

【讨论】：

【解决方案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 应用程序中，样式标签被小部件广泛操作。

【讨论】：

【解决方案4】：

更高效

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

【讨论】：

【解决方案5】：

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

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

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

&lt;div class="foo" id="bar"&gt;&lt;/div&gt;

【讨论】：