今天我们来复习HTML属性和DOM对象属性之间的关联和使用。
当浏览器加载HTML页面时，会根据文档的DOM节点生成相应的DOM对象。
比如，下面的HTML中包含一个input元素
<input type="text" id="username">
浏览器会生成一个HTMLInputElement对象
input元素有两个属性
- type属性的值为
text - id属性的值为
username
生成的HTMLInputElement对象也将具有相应的属性
input.type为textinput.id为username
换而言之，浏览器会自动将HTML元素的属性转换为DOM对象的属性。
但是，浏览器仅将标准属性转换为 DOM 对象的属性。
例如下面的secured属性为我们自定义的属性，所以就访问不到。
<input type="text" id="username" secured="true">
<script>
let input = document.querySelector('#username');
console.log(input.secured); // undefined
</script>
属性操作方法
要访问自定义属性可以使用下面的方法
element.getAttribute(name)– 获取属性的值element.setAttribute(name, value)– 设置属性值element.hasAttribute(name)– 判断属性是否存在element.removeAttribute(name)– 删除属性
attributes属性
element.attributes属性用来获取元素上的属性集合，
<input type="text" id="username" secured="true" value="1223">
<script>
let input = document.querySelector('#username');
for(let attr of input.attributes) {
console.log(`${
attr.name} = ${
attr.value}` )
}
// 输出：
// "type = text"
// "id = username"
// "secured = true"
// "value = 1223"
</script>
element.attributes是NamedNodeMap, 不是Array, 所以不能用数组的方法。
属性操作
设置属性有两种方式，一种是通过setAttribute()方法来设置，第二种是通过DOM属性修改例如input.tabIndex = 3方式。
获取属性也一样，一种是通过getAttribute(name)，第二种是通过DOM属性input.tabIndex来获取
这里要注意，当标准属性发生变化时，相应的属性会自动更新，但也有一些例外，反之亦然。
下面我们通过两种方式去设置tabindex属性，可以发现都会正常更新
<input type="text" id="username" tabindex="1">
<script>
let input = document.querySelector('#username');
// setAttribute()
input.setAttribute('tabindex', 2);
console.log(input.tabIndex); // 2
// DOM属性赋值
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3
</script>
而下面getAttribute()却获取不到DOM属性值的改变
<input type="text" id="username" tabindex="1">
<script>
let input = document.querySelector('#username');
// OK
input.setAttribute('value', '小帅');
console.log(input.value); // 小帅
// 获取失败，还是'小帅'
input.value = '小帅帅';
console.log(input.getAttribute('value')); // 小帅
</script>
disabled 属性很特殊，因为它是一个布尔属性，无论设置什么他都是true，如果要设置为false，使用 removeAttribute() 方法删除disabled属性。还有很多其他的布尔属性也都同理。
<button disabled id="btn1">按钮</button>
<button disabled="" id="btn2">按钮</button>
<button disabled="disabled">按钮</button>
<script>
let btn1 = document.querySelector('#btn1');
// 删除属性
btn1.removeAttribute('disabled');
let btn2 = document.querySelector('#btn2');
// 删除属性
console.log(btn2.hasAttribute('disabled'));
// 输出：true
</script>
DOM 属性类型
属性的值始终是字符串。但是，当属性转换为 DOM 对象的属性时，属性值可以是字符串、布尔值、对象等。
以下复选框元素具有已选中的属性。当checked 属性转换为DOM属性时，它是一个布尔值：
<input type="checkbox" id="chkAccept" checked>
<script>
let checkbox = document.querySelector('#chkAccept');
console.log(checkbox.checked); // true
</script>
下面是一个带有style属性的input元素，style属性是一个字符串，而DOM的style属性为一个对象
<input type="password" id="password" style="color:red;with:100%">
<script>
let input = document.querySelector('#password');
let styleAttr = input.getAttribute('style');
console.log(styleAttr);
// "color:red;width:100%"
console.dir(input.style);
// [object CSSStyleDeclaration]{
// ...
// color: "red",
// cssText: "color: red; width: 100%;",
// ...
// width: "100%",
// ...
// }
}
</script>
data-* 属性
如果想给一个元素添加一个自定义属性，在它前面加上data-前缀 ，例如data-value，data-开头的属性专为开发人员使用。
要访问 data-*属性，可以使用 dataset属性。
例如，我们有以下带有data-自定义属性的 div 元素，使用 dataset属性获取其值
<div id="main" data-progress="pending" data-value="10%"></div>
<script>
let bar = document.querySelector('#main');
console.log(bar.dataset);
// [object DOMStringMap] {
// progress: "pending",
// value: "10%"
// }
</script>
总结
元素属性操作是平时最常用的操作，熟练掌握是一名合格前端工程师的前提。
如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新