HTML DOM Attr对象
HTML DOM 节点
在 HTML DOM (文档对象模型)中,每个部分都是节点:
- 文档本身是文档节点
- 所有HTML 元素是元素节点
- 所有HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释 是注释节点
Attr 对象
在HTML DOM 中,Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
attr对象属性
attr.isId
如果属性是 ID 类型,,isId 属性返回 true,否则返回 false。
语法
attribute.isId
返回值:
Boolean ,true|false
DOM版本:
core Level 3
实例
查明属性是否是元素的 ID 属性:
document.getElementById("demo").attributes[0].isId;
结果:
true
浏览器支持
attr.name
name 属性返回属性的名称。
语法
attribute.name
返回值:
字符串值: 代表属性的名称
DOM 版本:
Core Level 1
实例
返回属性的名称:
document.getElementsByTagName("button")[0].attributes[0].name;
结果:
onclick
浏览器支持
attr.value
value 属性设置或返回属性的值。
语法
- 设置属性值:
attribute.value=value
- 返回属性值:
attribute.value
返回值:
字符串值,代表属性的值
DOM 版本:Core Level 1
实例
返回属性的值:
document.getElementsByTagName("button")[0].attributes[0].value;
结果:
myFunction()
实例 2:
设置属性的值
设置标题元素的 style 属性:
var h=document.getElementsByTagName("H1")[0];
h.getAttributeNode("style").value="color:green";
attr.specified
-
如果已规定某个属性,specified 属性返回true
-
如果已创建该属性但尚未添加到元素中,也会返回 true。
-
否则返回 false。
语法
attribute.specified
返回值:
Boolean, true|false
DOM 版本
Core Level 1
实例
查明是否已规定某个属性:
document.getElementById("demo").attributes[0].specified;//返回true
NamedNodeMap 对象
在 HTML DOM 中,NamedNodeMap 对象表示元素属性节点的无序集合。
NamedNodeMap 中的节点可通过名称或索引(数字)来访问。
nodemap对象属性
length 属性返回集合中节点的数量。
Node 对象的属性是 NamedNodeMap 对象的实例。
实例
返回 button 元素的属性数:
document.getElementsByTagName("BUTTON")[0].attributes.length;
//结果:
1
浏览器支持
IE Firefox Chrome Safari Opera
所有主流浏览器都支持 length 属性。
注释:在 Internet Explorer 8 以及更早的版本中,属性的 length 属性将返回元素所有可能属性数量。
语法
namednodemap.length
nodemap对象方法
从NameNodeMap返回回指定的属性节点 --nodemap.getNamedItem()
getNamedItem() 方法从 namedNodeMap 中返回具有指定名称的属性节点。
实例
返回 button 元素的 onclick 属性值:
var btn=document.getElementsByTagName("BUTTON")[0];
btn.attributes.getNamedItem("onclick").textContent;
//结果:myFunction()
浏览器支持
所有主流浏览器都支持 getNamedItem() 方法。
注释:
Internet Explorer 8 以及更早的版本不支持此方法。
移除指定的属性节点–nodemap.removeNamedItem()
removeNamedItem() 方法删除 namedNodeMap 中带有指定名称的节点。
实例
删除 input 按钮的 type 属性:
var btn=document.getElementsByTagName("INPUT")[0];
btn.attributes.removeNamedItem("type");
浏览器支持
IE Firefox Chrome Safari Opera
所有主流浏览器都支持 removeNamedItem() 方法。
注释:在 Internet Explorer 8 以及更早的版本中,当使用 removedNamedItem 方法来删除属性时,此方法会返回该属性,但不会删除该属性。
设置指定的属性节点(通过名称)–nodemap.setNamedItem()
setNamedItem() 方法向 nodeMap 添加指定的节点。
如果此节点已存在,则将替换该节点,并返回被替换的节点,否则返回值是 null。
实例
设置 H1 的 class 属性:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.democlass{
color:red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p id="demo">请点击按钮,将 H1 的 class 属性设置为 "democlass"。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var h=document.getElementsByTagName("H1")[0];
var typ=document.createAttribute("class");
typ.nodeValue="democlass";
h.attributes.setNamedItem(typ);
}
</script>
</body>
</html>
浏览器支持
nodemap.item() --返回 NamedNodeMap 中位于指定下标的节点。
语法:
document.getElementsByTagName("BUTTON")[0].attributes.item(0);
下面这条语法产生相同的结果:
document.getElementsByTagName("BUTTON")[0].attributes[0];
实例
返回 button 元素的首个属性的名称:
document.getElementsByTagName("BUTTON")[0].attributes.item(0).nodeName;
//结果: onclick
浏览器支持
IE Firefox Chrome Safari Opera
所有浏览器都支持 Attr 对象和 NamedNodeMap 对象。
DOM 4警告!
在 W3C DOM Core 中,Attr (attribute) 对象从 Node 对象继承所有属性和方法。
在 DOM 4 中,Attr 对象不再从 Node 继承。
为了保证未来的代码安全,您应该避免在属性对象上使用节点对象的属性和方法: