JavaScript DOM属性和方法之attribute属性对象

在HTML的DOM中，attribute对象表示HTML属性。HTML属性始终属于HTML元素，它在DOM节点中被称为属性节点。在DOM中，NamedNodeMap对象表示元素属性节点的无序集合，我们可以通过指定的索引访问指定的属性。通过element对象的attribute属性可以返回该元素节点的所有属性节点，也就是NamedNodeMap，而通过element对象的getAttributeNode()方法可以得到指定的属性节点

一、attribute对象属性

1、attr.isId

这个属性用来判断，如果属性节点是id类型，则返回true，否则返回false。

2、attr.name 和 attr.value

attr.name属性可以返回属性节点的名字，用于替代attr.nodeName属性
attr.value属性可以返回属性节点的值，用于替代attr.nodeValue属性

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title></head>
<body>
<div id="content" name="知数SEO" class="font">知数SEO</div>
<button onclick="getName()">获取属性节点的名字和值</button>
</body>
<script>function getName(){var attrs = document.getElementById('content').attributes;console.log(attrs);var name = attrs[0].name;var value = attrs[0].value;console.log(name,value);  // id content}
</script>
</html>

二、attribute对象方法

attribute对象并没有对性的方法，而它的集合也就是属性集合NameNodeMap有两个常用的方法

getNameItem() 返回指定的属性节点
setNameItem() 设置指定的属性节点

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_vx:zhishunet</title><style>.font{color:red}</style>
</head>
<body>
<div id="content" name="zhishuseo">知数SEO</div>
<button onclick="getAttr()">获取属性节点</button>
<button onclick="setAttr()">设置属性节点</button>
</body>
<script>var attrs = document.getElementById('content').attributes;// 获取指定属性function getAttr(){var name = attrs.getNamedItem('name');console.log(name);}// 设置指定属性function setAttr(){var classAttr = document.createAttribute('class');classAttr.value = 'font';attrs.setNamedItem(classAttr);}
</script>
</html>