在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属性
javascript
<!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() 设置指定的属性节点
javascript
<!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>