Javascript 标签的属性
1.为HTML标签设置和添加属性 setAttribute()
setAttribute()方法可以给HTML标签设置/添加属性（原生的属性或者自定义的属性都可以）添加的属性会存储在标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
.redFont{
color:red;
}
</style>
<body>
<div id="div">我是div</div>
</body>
</html>
<script>
var div = document.getElementsByTagName('div')[0]
// 设置属性值
div.setAttribute('id','test')
// 添加属性并赋值
div.setAttribute('class','redFont')
// 添加自定义属性
div.setAttribute('xxx','abc')
</script>
运行结果：（字体变为红色，样式生效）
<div id="test" class="redFont" xxx="abc">我是div</div>
2.获取某个属性的属性值 getAttribute(attr)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
.redFont{
color:red;
}
</style>
<body>
<div id="test" class="redFont" xxx="abc">我是div</div>
</body>
</html>
<script>
var div = document.getElementsByTagName('div')[0]
var id_value = div.getAttribute('id')
var class_value = div.getAttribute('class')
var xxx_value = div.getAttribute('xxx')
console.log(id_value,class_value,xxx_value) // test redFont abc
</script>
3.删除指定的属性 removeAttribute(attr)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
.redFont{
color:red;
}
</style>
<body>
<div id="test" class="redFont" xxx="abc">我是div</div>
</body>
</html>
<script>
var div = document.getElementsByTagName('div')[0]
// 删除原生的属性
div.removeAttribute('id')
div.removeAttribute('class')
// 删除子定义的属性
div.removeAttribute('xxx')
</script>
运行结果：
<div>我是div</div>
4.判断某个属性是否存在 hasAttribute()
- 传入属性名来判断改属性是否存在，只要该属性存在，无论有没有属性值都返回true，否则返回false
<script>
var box = document.querySelector('#box')
//必须要传参，不然报错
console.log(box.hasAttribute('')) //false
//已经存在且有值的属性
console.log(box.hasAttribute('id')) //true
console.log(box.hasAttribute('class')) //true
//存在属性但是没有属性值
console.log(box.hasAttribute('draggable')) //true
//不存在的属性
console.log(box.hasAttribute('title')) //false
</script>
5.Attribute()方法与点语法的比较
| 方法 | 操作对象 | 原生属性（id,class,title等） | 自定义属性 |
|---|---|---|---|
| Attribute()系列 | 标签 | 共通 | 自定义属性存储在标签中 |
| 点语法 | Dom元素 | 共通 | 自定义属性存储在内存中 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
.redFont{
color:red;
}
</style>
<body>
<div id="test" class="redFont" xxx="abc">我是div</div>
</body>
</html>
<script>
var div = document.getElementsByTagName('div')[0]
// 原生属性是相通的
console.log(div.getAttribute('id')) //test
console.log(div.id) //test
console.log(div.id === div.getAttribute('id')) // true
// 通过setAttribute修改属性
div.setAttribute('id','myDiv')
console.log(div.id) // myDiv
// 通过点语法修改属性
div.id = "newId"
console.log(div.getAttribute('id')) // newId
// 标签自定义属性只有getAttribute/setAttribute方法才能访问
console.log(div.getAttribute('xxx')) //abc
console.log(div.xxx) //undefined
//点语法添加的自定义属性只有点语法才能访问
div.yyy = "def"
console.log(div.yyy) //def
console.log(div.getAttribute('yyy')) //null
//class属性比较特殊
console.log(div.getAttribute('class')) //redFont
console.log(div.class) //undefined
console.log(div.className) //redFont
console.log(div.getAttribute('class') === div.className) // true
</script>
