属性操作

[ 元素特性 & 对象属性？！] 所谓属性操作，就是通过 JS 进行特性 / 属性的读写操作。

HTML特性与DOM属性( HTML attribute & DOM property )的关系为：每个html属性对应相应的DOM对象属性。

<div> <label for="userName">用户名</label> <input type="text" id="userName" class="u-txt"> </div> input.id // "userName" input.type // "text" input.className // "u-txt" label.htmlFor // "userName"

1
2
3
4
5
6
7
8
9

   <div>
       <label for="userName">用户名</label>
       <input type="text" id="userName" class="u-txt">
   </div>

   input.id    // "userName"
   input.type    // "text"
   input.className    // "u-txt"
   label.htmlFor    // "userName"

[1] 属性访问器 // 特点：通用性差（名字异常）、扩展性差、实用对象（Good）

读（访问）

// 通过属性访问器得到的属性类型是转换过的实用对象 <input type="text" maxlength="10" disable onlick="showSuggest();"> input. className; // "u-txt" String类型 maxlength; // 10 Number类型 disabled; // true Boolean类型 onlick； // function onlick(evert){...} Function类型

1
2
3
4
5
6
7
8
9

// 通过属性访问器得到的属性类型是转换过的实用对象

<input type="text" maxlength="10" disable onlick="showSuggest();">

input.
className;  // "u-txt"   String类型
maxlength;  // 10     Number类型
disabled;  // true     Boolean类型
onlick；  // function onlick(evert){...}        Function类型

写（赋值）

input.value = 'wwq@163.com'; input.disable = true;

1
2

input.value = 'wwq@163.com';
input.disable = true;

[2] getAttribute / setAttribute // 特点：仅字符串，但通用性好

读 var attribute = element.getAttribute(attributeName);

// 通过 getAttribute / setAttribute 得到的是 String 类型 input.getAttribute("class"); // "userName"

1
2
3

// 通过 getAttribute / setAttribute 得到的是 String 类型

input.getAttribute("class"); // "userName"

写 element.setAttribute(name,value);

input.setAttribute("value","wwq@163.com"); input.setAttribute("disabled","");

1
2

input.setAttribute("value","wwq@163.com");
input.setAttribute("disabled","");

[3] 自定义特性 / 属性 // 主要用途：元素上保存数据

对于自有属性及自定义属性的读、写，一般是通过 getAttribute/setAttribute 来实现。

另外，属性的移除也可以通过 element.removeAttribute(name); 来实现。

HTML5 新增了数据集属性 dataset（规范的自定义特性），用于存储页面或应用程序的私有定制数据。

数据集属性以 'data-' 为前缀，可以使用 JS 中对象属性 dataset 访问 data-* 的值。

由于元素特性的值以 '-' 做间隔，在对象属性中将转换为首字母大写的形式。

<div id="user" data-id="123456" data-account="wwq" data-name="姓名" 
	data-email="wwq123@163.com" data-mobile="13524543878">wwq</div>

var user = document.getElementById('user');
// 自有属性
   console.log(user.id);
// 自定义属性
div.dataset.
	       id  // "123456"
	       account  // "wwq"
	       name  // "姓名"
	       ...

<div id="user" data-id="123456" data-account="wwq" data-name="姓名"

data-email="wwq123@163.com" data-mobile="13524543878">wwq</div>

var user = document.getElementById('user');

// 自有属性

console.log(user.id);

// 自定义属性

div.dataset.

id // "123456"

account // "wwq"

name // "姓名"

...