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.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>