Element.attributes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Element.attributes 属性返回一个注册到指定节点的所有属性节点的实时集合。该集合是一个 NamedNodeMap 对象,不是 Array,所以它没有 Array 的方法,其包含的 Attr 节点的索引顺序随浏览器不同而不同。更确切地说,attributes 是字符串形式的键值对,代表了那个属性的任何信息。

一个 NamedNodeMap 对象。

示例

基本示例

js
// 获取文档中的第一个 <p> 元素
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;

遍历元素的属性

你可以使用 for...of 枚举一个元素的所有属性。

在以下例子中会遍历文档中 id 为“paragraph”的元素的属性节点,并打印出来。

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>属性示例</title>
    <script>
    function listAttributes() {
       const paragraph = document.getElementById("paragraph");
       const result = document.getElementById("result");
       // 首先,确定那个段落有一些属性
       if (paragraph.hasAttributes()) {
         let output = "Attributes of first paragraph:\n";
         for (const attr of paragraph.attributes) {
           output += `${attr.name} -> ${attr.value}\n`;
         }
         result.textContent = output;
       } else {
         result.textContent = "没有可显示的属性";
       }
    }
    </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">示例段落</p>
    <form action="">
      <p>
        <input type="button" value="显示第一个属性名及其值"
          onclick="listAttributes();">
        <pre id="result"></pre>
      </p>
    </form>
  </body>
</html>

规范

Specification
DOM
# dom-element-attributes

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
attributes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见