Element.attributes - Web APIs 编辑
The Element.attributes
property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap
, not an Array
, so it has no Array
methods and the Attr
nodes' indexes may differ among browsers. To be more specific, attributes
is a key/value pair of strings that represents any information regarding that attribute.
Syntax
var attr = element.attributes;
Example
Basic examples
// Get the first <p> element in the document
var para = document.getElementsByTagName("p")[0];
var atts = para.attributes;
Enumerating elements attributes
Numerical indexing is useful for going through all of an element's attributes.
The following example runs through the attribute nodes for the element in the document with id "paragraph", and prints each attribute's value.
<!DOCTYPE html>
<html>
<head>
<title>Attributes example</title>
<script type="text/javascript">
function listAttributes() {
var paragraph = document.getElementById("paragraph");
var result = document.getElementById("result");
// First, let's verify that the paragraph has some attributes
if (paragraph.hasAttributes()) {
var attrs = paragraph.attributes;
var output = "";
for(var i = attrs.length - 1; i >= 0; i--) {
output += attrs[i].name + "->" + attrs[i].value;
}
result.value = output;
} else {
result.value = "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();">
<input id="result" type="text" value="">
</p>
</form>
</body>
</html>
Specifications
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
NamedNodeMap
, the interface of the returned object- Cross-browser compatibility considerations: on quirksmode
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论