js_自定义属性

二. 自定义属性

自定义属性操作

1.获取属性值

• element.属性 获取属性值

• element.getAttribute(‘属性’);

   var  d = document.querySelector('div');
      console.log(d.getAttribute('index'));
  

区别

• element.属性 获取内置属性值（元素本身自带的属性）
• element.getAttribute(‘属性’); 主要获得自定义的属性 （标椎） 我们程序员自定义的属性

2.设置属性值

• element.属性 = ‘值’ 设置内置属性值
• element.setAttribute(‘属性’， ‘值’);

区别：

• element.属性 设置内置属性
• element.setAttribute(‘属性’)； 主要设置自定义的属性（标准）

3.移除属性

• element.sermoverAttribute(‘要移除的属性’);

H5自定义属性

• 自定义属性目的： 是为保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
• 自定义属性获取是通过getAttribute（‘获取’）获取。
• 但是有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
• H5给我们新增了自定义属性：

1.H5规定自定义属性

• H5规定自定义属性 data - 开头作为属性名并且赋值。

• 比如

• 或者使用 Js设置

• element.setAttribute( ‘data-index’ , 2);

2.获取H5自定义属性

1.兼容性获取 element.getAttribute（‘data-index’ ）；

2.H5新增 elemen.dataset.index 或者 element.dataset[‘index’] ie11 才支持

 var div = document.querySelector('div');
   /*  console.log(div.getAttribute('getTime')); */
    div.setAttribute('data-index',344);
    console.log(div.dataset.index);