元素:attributes 属性

Element.attributes 属性返回注册到指定节点的所有属性节点的实时集合。它是一个 NamedNodeMap,而不是一个 Array,因此它没有 Array 方法,并且 Attr 节点的索引可能在不同浏览器之间有所不同。更具体地说,attributes 是一个字符串的键值对,表示与该属性相关的任何信息。

一个 NamedNodeMap 对象。

示例

基本示例

js
// Get the first <p> element in the document
const paragraph = document.querySelector("p");
const attributes = paragraph.attributes;

枚举元素属性

您可以使用 for...of 遍历元素的属性。以下示例遍历文档中 id 为“paragraph”的元素的属性节点,并打印每个属性的值。

html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Attributes example</title>
    <script>
    function listAttributes() {
       const paragraph = document.getElementById("paragraph");
       const result = document.getElementById("result");

       // First, let's verify that the paragraph has some attributes
       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 = "No attributes to show";
       }
    }
    </script>
  </head>

  <body>
    <p id="paragraph" style="color: green;">Sample Paragraph</p>
    <form action="">
      <p>
        <input type="button" value="Show first attribute name and value"
          onclick="listAttributes();">
        <pre id="result"></pre>
      </p>
    </form>
  </body>
</html>

规范

规范
DOM 标准
# dom-element-attributes

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅