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

作者

在 JavaScript 中获取 DOM 元素的所有属性

Get all Attributes of a DOM Element using JavaScript

要获取 DOM 元素的所有属性：

  1. 使用该getAttributeNames()方法获取元素属性名称的数组。
  2. 使用该reduce()方法遍历数组。
  3. 在每次迭代中，添加一个包含属性名称和值的新键/值对。

这是我们将获取其属性的 DOM 元素。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- 👇️ -->
    <div id="blue" data-id="example" class="box">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const element = document.getElementById('blue');

// ✅ Get object of all {name: value}
const attrs = element.getAttributeNames().reduce((acc, name) => {
  return {...acc, [name]: element.getAttribute(name)};
}, {});

// 👇️ {id: 'blue', 'data-id': 'example', class: 'box'}
console.log(attrs);

// ✅ Get array of all attribute names
const attrNames = element.getAttributeNames();
console.log(attrNames); // 👉️ ['id', 'data-id', 'class']

// ✅ Get array of all attribute values
const attrValues = element
  .getAttributeNames()
  .map(name => element.getAttribute(name));

console.log(attrValues); // 👉️ ['blue', 'example', 'box']

我们使用了
Element.getAttributeNames()
方法来获取元素属性名称的数组。

索引.js
const element = document.getElementById('blue');

// 👇️ ['id', 'data-id', 'class']
console.log(element.getAttributeNames());

The next step is to use the
Array.reduce
method to iterate over the array of attribute names.

We passed an empty object as the initial value for the accumulator variable.

Whatever we return from the callback function we passed to the reduce method becomes the accumulator for the next iteration.

We assign the attribute name as a key on the object and use the name to get the
corresponding attribute value via the
Element.getAttribute()
method.

After the last iteration, the object will contain a mapping of all the element’s attribute names to the element’s attribute values.

If you need to get an array of a DOM element’s attribute values, you have
to:

  1. Use the getAttributeNames() method to get an array of the element’s
    attribute names.
  2. 使用该map()方法遍历数组并使用该getAttribute方法获取每个属性值。
索引.js
const element = document.getElementById('blue');

// ✅ Get array of all attribute values
const attrValues = element
  .getAttributeNames()
  .map(name => element.getAttribute(name));

console.log(attrValues); // 👉️ ['blue', 'example', 'box']

如果存在一种方法，它会更加直观和直接getAttributeValues，但这种方法可以完成工作。

我们传递给
Array.map
方法的函数会为属性名称数组中的每个元素调用。

在每次迭代中，我们使用该getAttribute方法获取属性的值并返回结果。

–