有时，我们想用 JavaScript 或 jQuery 获取 HTML 元素的所有属性。

在本文中，我们将了解如何使用 JavaScript 或 jQuery 获取 HTML 元素的所有属性。

使用 JavaScript 获取元素的所有属性

我们可以使用 node.attributes 属性通过 JavaScript 获取元素的所有属性。

例如，如果我们有以下 HTML：

<div style='color: red' class="myDiv" id="myDiv">
</div>

然后我们可以写：

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];
const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)

将div的所有属性获取到一个对象中。

我们将 node.attributes 对象放到一个数组中。

然后我们在数组上调用 reduce 以将所有具有 attribute.value 的 attribute.name 属性添加到带有回调的 attrs 对象中

我们在回调中返回 attrs。

在第二个参数中，我们传入一个空对象以将其设置为 attrs 的值。

因此，获取到的属性是：

{style: "color: red", class: "myDiv", id: "myDiv"}

使用 jQuery 获取元素的所有属性

我们可以使用 jQuery 的 each 方法循环遍历所有属性。

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)

我们用 $ 函数返回 div。

然后我们创建空的 attrs 对象。

接下来，我们用 node.attrbiutes 循环遍历所有属性。

在回调中，我们使用 attribute.name 作为属性名称和 attribute.value 作为属性值来填充 attrs。

我们得到了和之前一样的结果。

结论

我们可以使用 node.attributes 属性通过 JavaScript 获取元素的所有属性。

此外，我们可以使用 jQuery each 方法循环遍历所有属性。