DOM属性操作
DOM属性主要是指使用脚本操作标签的属性，主要包括：
- 定义属性
- 操作属性
- 查询属性
- 删除属性
- 添加属性
- 修改属性
- classList ：H5新增
- DataSet数据集 ：H5新增
定义属性：
HTMl标签是有属性的，她的属性是属性名 / 值构成
<div class = "aa" id="bb" style="color:red" title="cc"></div>
Document API获取元素之后，我们拿到的是js元素对象
const div = document.querySelector("div")
console.log(div) //[object HTMLDivElement] 是标签<div>对应的元素名
为了操作标签的属性，DOM为JS脚本定义了一个属性的映射集，映射了所有的HTML属性。改映射中的属性都是元素对象的属性，它对应HTML属性
转换属性规则：
- 如果HTML元素属性名是一个单词，那么元素对象属性也是单词
- 如果HTML元素属性名是一个JS保留字，那么要做特殊转换
class => className
for=> htmlFor - 所有的属性值都是字符串，但是有两个例外
input标签的checked 的属性值是布尔
option标签的selected 的属性值是布尔
<form>
<input type="checkbox" />
<input type="radio" />
<sele>
</form>
查找元素的属性
1.Element.getAttribute()
定义：查找元素的属性
语法：
元素.getAttribute("属性名")
返回值：返回字符串值或null（找不到）
实例：
<h1 id="aaa" class="bbb" style="color:#333;"></h1>
<script>
const h1= document.querySelector("h1")
//读取属性的方法
console.log(h1.id);
console.log(h1['style']);
console.log(h1.getAttribute("class"));
</script>
2.attributes
定义：属性用于查询指定元素的所有属性。
语法：
元素.attributes
返回值：返回NamedNodeMap对象，该对象包含指定元素的所有属性节点的实时集合。
NamedNodeMap对象不是数组，也不是伪数组，而是一个包含字符串的键值对。可以使用for...of枚举。
实例：
console.log(h1.attributes);//NamedNodeMap(3) [ id="aaa", class="bbb", style="color:#333;" ]
删除属性
1.Element.removeAttribute()
定义：用于从元素中删除具有指定名称的属性。
语法：
元素.removeAttribute('属性名')
返回值：无
实例：
classList
classList 伪数组三个方法
- 元素.classList.add()//向class值列表中添加一个值
- 元素.classList.remove()//向class值列表中删除一个值
- 元素.classList.toggle()//如果class值有，就执行remove，没有执行add
btn[0].addEventListener("click",function(){
//1.点击按钮，让文字变成红色 add
h2.classList.add("red")
//2.点击按钮删除边框 remove
// h2.classList.remove("blue")
})
删除属性
1.Element.removeAttribute()
定义：用于查询指定元素是否具有指定的属性。
语法：
元素.removeAttribute('属性名')
返回值：无
实例：
h1.removeAttribute("class")
检测属性
1.Element.hasAttribute()
定义：Element.hasAttribute() 方法用于查询指定元素是否具有指定属性。
语法：
元素.hasAttribute('元素名')
返回值：布尔值，找到了返回true 找不到返回false
实例：
<div class="aaa" id="bbb" ></div>
<script>
// 元素.hasAttribute('元素名')
const div= document.querySelector("div")
console.log(div.hasAttribute("class"))//true
console.log(div.hasAttribute("abc"))//false
设置元素的属性
1.Element.setAttribute()
定义：Element.setAttribute()方法用于设置指定元素的属性值。如果该属性已经存在，则更新该值；
语法：
Element.setAttribute("属性名"," 属性值")
没有返回值
实例：
div.setAttribute("id","hello")
console.log(div["id"])
