标签的映射
HTML元素是由一个标签和一组称为属性的名/值对组成。
<div id='sports-news' class='news' title="体育新闻' style=''>
</div>
<img src="./images/dimensions-client.png">
<a href="">超链接</a>
HTMLElement API定义了映射HTML标签的元素对象名。
[object HTMLDivElement] //<div>
[object HTMLUListElement] //<ul>
[object HTMLImageElement] //<img>
属性的映射
还定义了映射HTML标签的属性。
HTMLElement.id
HTMLElement.src
HTMLElement.className
HTMLElement.style
DOM属性操作包括什么？
DOM属性操作主要是指使用脚本操作标签的属性，主要包括：
- 定义属性：
- 操作属性
- 查询属性
- 添加属性
- 修改属性
- 删除属性
- classList：H5新增
- DataSet数据集：H5新增
定义属性
我们学习了HTML标签，HTML标签是有属性的，它的属性是属性名/值构成
<div id='aaa' class='bbb' title='ccc' style='color:red'></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标签的checjed属性值：布尔值
<form>
<input type="checkbox" />
<input type="radio" name="aaa" />
<input type="radio" name="aaa" />
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</form>
属性操作
操作属性指对属性进行：
读取元素属性
第一种：点语法
定义：
点语法是使用英文点号操作符.访问对象属性的方法。使用点语法操作元素对象的属性的方法，被称为“属性访问表达式“。
语法
元素对象.属性名
返回值：
返回元素对象或undefined。
演示
document.querySelector('div').id
第二种：方括号法
定义
方括号语法是是“属性访问表达式“的第二种形式，即使用方括号操作符[]访问对象属性的方法。其特点：必须使用"字符串"或"可求值字符串的变量"访问对象的属性，因为直接访问元素对象.变量这个属性是不存的。
语法
元素对象['属性名']
元素对象[变量名]
返回值
返回元素对象或undefined。
示例
<h2 title='二级标题'>Hello World</h2>
const box = 'title'
document.querySelector('h2')[box] //'二级标题'
第三种：Element.getAttribute()
定义：
Element.getAttribute()方法用于查询指定元素的指定属性。
语法
元素.getAttribute('属性名')
返回值：
返回字符串属性值或null
示例：查询段落p的id是多少
<p id='para'>Hello world</p>
<script>
const p = document.querySelector("p");
const result1 = p.getAttribute("id");
console.log(result1); //'para'
const result2 = p.getAttribute("abc");
console.log(result2); //null
</script>
第四种：Element.attributes
定义：
Element.attributes属性用于查询指定元素的所有属性。
返回值：
返回NamedNodeMap对象，该对象是一个属性列表对象，包含指定元素的所有属性节点的实时集合。
NamedNodeMap(3) [ id="p", title="这是段落", style="color: green;" ]
NamedNodeMap对象不是数组，也不是伪数组，而是一个包含字符串键值对的map对象。可以使用for...of枚举。
检测元素属性
Element.hasAttribute()
定义：
Element.hasAttribute()方法用于查询指定元素是否具有指定属性。
语法
元素.hasAttribute('属性名')
返回值：
返回布尔值
示例：
<p id="bbb">种一棵树的最佳时间是十年前，其次是现在。</p>
<script>
const p = document.querySelector("p");
const result1 = p.hasAttribute("id");
console.log(result1); //true
const result2 = p.hasAttribute("abc");
console.log(result2); //false
</script>
添加修改元素属性
Element.setAttribute()
定义：
Element.setAttribute()方法用于向指定元素添加新属性。如果该属性已经存在，则更新该值；
语法
Element.setAttribute('属性名', '属性值')
返回值：
无
**示例：为p元素设置class属性值为aaa
<p id="bbb">种一棵树的最佳时间是十年前，其次是现在。</p>
<script>
const p = document.querySelector("p");
p.setAttribute("class", "aaa");
p.setAttribute("id", "hello");
console.log(p); //<div id='hello' class='aaa'>
</script>
删除元素的属性
Element.removeAttribute()
定义：
Element.removeAttribute() 用于删除指定元素的指定属性。
语法
元素.removeAttribute('属性名')//根据属性名删除属性
返回值：
无
示例
获取Attr属性节点
Element.getAttributeNode()
定义：
Element.getAttributeNode()方法用于查询指定元素的指定属性节点(attr)。
语法
元素.getAttributeNode('属性名')
返回值：
返回attr属性节点。
示例
<h2>123456789</h2>
<p id="bbb">元素.getAttributeNode('属性名')</p>
<script>
const p = document.querySelector("p");
const node = p.getAttributeNode("id");
console.log(node);
console.log(node.nodeType);
</script>
操作元素的class属性
使用Element API操作元素的class属性有两种方式：
- 传统方式: 使用元素.className进行操作。
- H5新增方式: H5中为元素定义了新属性元素.classList属性。
element.className
定义：
element.className通过读取或设置元素的属性来操作class。属于传统方式。
语法
元素.className //读操作
元素.className = 'class名' //写操作
返回值：
示例
element.classList
定义：
element.classList是H5中新增属性。用于操作元素的class属性列表。
语法
元素.classList.add('类名') //无返回值
元素.classList.remove('类名') //无返回值
元素.classList.toggle('类名') //返回true或false
返回值：
该属性返回一个只读的DOMtokenList伪数组对象，该对象内部存储了一个包含了所有class属性值的列表。为了操作class属性，DOMtokenList对象定义了三种方法：
- DOMTokenList.add(): 向class值列表中添加指定值。
- DomTokenList.remove(): 从class值列表中删除指定值
- DomTokenList.toggle(): 如果class值列表中有，就执行remove()，反之就执行add()
其他伪数组:HTML Collection、NodeLists
- 遍历属性：
- 删除属性：
- 修改属性：
- 查询属性：
