在HTML DOM（文档对象模型）中，每个部分都是节点：文档本身是文档节点，所有HTML元素是元素节点，所有HTML属性是属性节点，HTML元素内的文本是文本节点，注释是注释节点；
在HTML DOM中，Attr对象表示HTML属性，HTML属性始终属于HTML元素；
属性和方法
- 如果属性是 ID 类型，isId 属性返回 true，否则返回 false；
<!DOCTYPE html>
<html>
<body>
<p id="demo">请点击按钮来查明 P 元素中的首个属性是 ID 属性。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=x.attributes[0].isId;
}
</script>
<p><b>注释：</b>Internet Explorer 或 Opera 不支持 isId 属性。</p>
</body>
</html>
isId
- name 属性：返回属性的名称；
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮来显示按钮的首个属性的名称。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var btn=document.getElementsByTagName("button")[0];
var x=document.getElementById("demo");
x.innerHTML=btn.attributes[0].name;
}
</script>
<p><b>注释：</b>在 Internet Explorer 或 更早的版本中，该属性将返回元素所有可能属性的集合。在本例中，将输出一个不同属性的名称。</p>
</body>
</html>
name 属性
- value 属性：设置或返回属性的值；
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">Hello World</h1>
<p id="demo">请点击按钮来改变上面这个标题的 style 属性。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var h=document.getElementsByTagName("H1")[0];
h.getAttributeNode("style").value="color:green";
}
</script>
</body>
</html>
value 属性
- specified 属性：如果已规定某个属性，返回 true；如果已创建该属性但尚未添加到元素中，也会返回 true；
<!DOCTYPE html>
<html>
<body>
<p id="demo">请点击按钮来查明按钮是否指定了 onclick 属性。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var btn=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
x.innerHTML=btn.getAttributeNode("onclick").specified;
}
</script>
</body>
</html>
specified 属性
- getNamedItem() 方法：从 namedNodeMap 中返回具有指定名称的属性节点；
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮来获得 button 元素的 onclick 属性值。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var a=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
x.innerHTML=a.attributes.getNamedItem("onclick").textContent;
}
</script>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 getNamedItem 方法。</p>
</body>
</html>
getNamedItem() 方法
- item() 方法：以 Node 对象返回 namedNodeMap 中位于指定索引的节点；
document.getElementsByTagName("BUTTON")[0].attributes.item(0);
// 等价于
document.getElementsByTagName("BUTTON")[0].attributes[0];
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮来获得 button 元素的首个属性的名称。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var a=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
x.innerHTML=a.attributes.item(0).nodeName;
}
</script>
</body>
</html>
item() 方法
- length 属性：返回集合中节点的数量，Node 对象的属性是 NamedNodeMap 对象的实例；
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击按钮来查看 button 元素拥有的属性数：</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var a=document.getElementsByTagName("BUTTON")[0].attributes;
var x=document.getElementById("demo");
x.innerHTML=a.length;
}
</script>
<p>结果是 1（button 元素的 onclick 属性）。</p>
</body>
</html>
length 属性
- removeNamedItem() 方法：删除 namedNodeMap 中带有指定名称的节点；
<!DOCTYPE html>
<html>
<body>
<input type="button" value="OK">
<p id="demo">点击按钮来删除 input 元素的 type 属性。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var btn=document.getElementsByTagName("INPUT")[0];
btn.attributes.removeNamedItem("type");
}
</script>
<p><b>注释：</b>当删除 input 元素的 type 属性后，此元素的类型将是 <em>text</em>，即默认值。</p>
<p><b>注释：</b>在 Internet Explorer 8 以及更早的版本中，removedNamedItem 不会返回属性。</p>
</body>
</html>
removeNamedItem() 方法
- setNamedItem() 方法：向 nodeMap 添加指定的节点，如果此节点已存在，则将替换该节点，并返回被替换的节点，否则返回值是 null；
<!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>
setNamedItem() 方法
网友评论