操作属性
优质
小牛编辑
123浏览
2023-12-01
属性操作
HTML 属性与 DOM 属性的对应
每个 HTML 属性都会对应相应的 DOM 对象属性。
<div>
<label for="username">User Name: </label>
<input type="input" name="username" class="text" value="">
</div>
input.id; // 'username'
input.type; // 'text'
input.className; // 'text'
label.htmlFor; // 'username'
属性操作方式
Property Accessor
通过属性方法符得到的属性为转换过的实例对象(并非全字符串)。
特点
- X 通用行差(命名异常,使用不同的命名方式进行访问)
- X 扩展性差
- √ 实用对象(取出后可直接使用)
读取属性
<div>
<label for="username">User Name: </label>
<input type="input" name="username" class="text" value="">
</div>
input.className; // 'text'
input[id]; // 'username'
写入属性
可增加新的属性或改写已有属性。
input.value = 'new value';
input[id] = 'new-id';
getAttribute / setAttribute
特点
- X 仅可获取字符串(使用时需转换)
- √ 通用性强
读取属性
获取到的均为属性的字符串。
var attribtue = element.getAttribute('attributeName');
写入属性
可增加新的属性或改写已有属性。
element.setAttribute('attributeName', value);
dataset
自定义属性,其为 HTMLElement
上的属性也是 data-*
的属性集。主要用于在元素上保存数据。获取的均为属性字符串。数据通常使用 AJAX 获取并存储在节点之上。
<div id='user' data-id='1234' data-username='x' data-email='mail@gmail.com'></div>
div.dataset.id; // '1234'
div.dataset.username; // 'x'
div.dataset.email; // 'mail@gmail.com'
NOTE:dataset
在低版本 IE 不可使用,但可通过 getAttribute
与 setAttribute
来做兼容。