1. 操作 HTML

set/get/removeAttribute
设置/获取/删除 当前元素的某一个属性

  1. var oBox = document.getElementById('box');
  2. //=> 基于 Attribute 等 DOM 方法完成自定义属性的设置
  3. oBox.setAttribute('myColor', 'red'); //=> 设置
  4. oBox.getAttribute('myColor'); //=> 获取
  5. oBox.removeAttribute('myColor'); //=> 删除

2. 操作对象

通过点或方括号来获取和修改，通过 delete 删除

  1. //=> 把当前元素作为一个对象，在对象对应的堆内存中新增一个自定义属性
  2. oBox.myIndex = 10; //=> 设置
  3. oBox.myIndex //=> 获取
  4. delete oBox.myIndex //=> 删除

3. 区别

这两种机制属于独立的运作体制，不能相互混淆使用。

  • 第一种是基于对象键值对操作方式，修改当前元素对象的堆内存空间来完成

  • 第二种是直接修改页面中 HTML 标签的结构来完成（此种方法设置的自定义属性可以在结构上呈现出来）

基于 setAttribute 设置的自定义属性值都是字符串

一般使用第一种，简单操作。第二种会呈现在结构中，会被别人看到，容易受到攻击。

一般来说，由第一种方式添加的自定义属性，也只能由第一种方式获取，由第二种方式添加的自定义属性，也只能由第二种方式获取到。

（1）通过规范的 data-* 设置的自定义属性，可以通过 oBox.dataset.* = xx 设置，同样会反映到页面中，这两种方式都可以获取
（2）一些内置的属性，如：src、href、style 等，都是可以通过两种方式来修改和获取的，同样也会在页面反映。