元素：getAttributeNames() 方法

getAttributeNames() 方法是 Element 接口的方法，它返回元素的属性名称，以字符串的 Array 形式表示。如果元素没有属性，则返回一个空数组。

使用 getAttributeNames() 和 getAttribute()，是访问 Element.attributes 的内存高效且性能优化的替代方法。

getAttributeNames() 返回的名称是限定属性名称，这意味着具有命名空间前缀的属性将使用该命名空间前缀返回其名称（不是实际的命名空间），后面跟着一个冒号，再跟着属性名称（例如，xlink:href），而任何没有命名空间前缀的属性都将按原样返回其名称（例如，href）。

语法

js
getAttributeNames()

参数

无。

返回值

一个 (Array) 字符串数组。

示例

以下示例展示了如何

  • 对于具有命名空间前缀的属性，getAttributeNames() 将返回该命名空间前缀以及属性名称。
  • 对于没有命名空间前缀的属性，getAttributeNames() 将仅返回属性名称，按原样。

重要的是要理解

  1. 属性可以在 DOM 中存在命名空间，但没有命名空间前缀。
  2. 对于 DOM 中具有命名空间但没有命名空间前缀的属性，getAttributeNames() 将仅返回属性名称，没有任何指示该属性位于命名空间中。

以下示例包括这样的“有命名空间但没有命名空间前缀”的情况。

js
const element = document.createElement("a");

// set "href" attribute with no namespace and no namespace prefix
element.setAttribute("href", "https://example.com");
// set "href" attribute with namespace and also "xlink" namespace prefix
element.setAttributeNS(
  "http://www.w3.org/1999/xlink",
  "xlink:href",
  "https://example.com",
);
// set "show" attribute with namespace but no namespace prefix
element.setAttributeNS("http://www.w3.org/1999/xlink", "show", "new");

// Iterate over element's attributes
for (const name of element.getAttributeNames()) {
  const value = element.getAttribute(name);
  console.log(name, value);
}

// logs:
// href https://example.com
// xlink:href https://example.com
// show new

规范

规范
DOM 标准
# ref-for-dom-element-getattributenames①

浏览器兼容性

BCD 表仅在浏览器中加载