元素: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 表格仅在浏览器中加载
另请参阅
NamedNodeMap
,返回对象的接口- 跨浏览器兼容性注意事项:在 quirksmode 上