今天我们来复习HTML属性和DOM对象属性之间的关联和使用。
当浏览器加载HTML页面时,会根据文档的DOM节点生成相应的DOM对象。
比如,下面的HTML中包含一个input
元素
<input type="text" id="username">
浏览器会生成一个HTMLInputElement
对象
input
元素有两个属性
- type属性的值为
text
- id属性的值为
username
生成的HTMLInputElement
对象也将具有相应的属性
input.type
为text
input.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知识,微信搜索【小帅的编程笔记】,每天更新