Web APIS——（自定义属性）

固有属性:

标签天生自带的属性 比如class id title等, 可以直接使用点语法操作。

自定义属性:

由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API

getAttribute('属性名') // 获取自定义属性

setAttribute('属性名', '属性值') // 设置自定义属性

removeAttribute('属性名') // 删除自定义属性

代码举例：

<div id="box" index="6" data-type="elm" data-aaa="aaa">哇哈哈</div>

	<!-- 自定义属性 -->
	<!-- 操作自定义属性： -->
		

	<script type="text/javascript">
		
		let div = document.querySelector('div');

		// console.log( div.index );
		// 获取自定义属性：getAttribute('属性名')
		// console.log( div.getAttribute('index') );
		// console.log( div.getAttribute('data-type') );
		
		// 设置添加自定义属性：
		// setAttribute('属性名', '属性值');
		// div.setAttribute('index', '666');
		// div.setAttribute('data-aaa', 'abc');
		
		// 移除自定义的属性操作：
		// div.removeAttribute('data-type');
		// div.removeAttribute('data-aaa');

	</script>

---

data-自定义属性:

传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头， 在DOM对象上一律以dataset对象方式获取

    DOM元素.dataset.自定义属性                    // 获取自定义属性
    DOM元素 .dataset.自定义属性 = 'XXX'      // 设置自定义属性

<div id="box" index="6" data-type="elm" data-aaa="aaa">哇哈哈</div>

	<!-- 自定义属性 -->
	<!-- 操作自定义属性： -->
		

	<script type="text/javascript">

		// H5：
		// 针对于：data-xxx自定义属性：
		// 元素.dataset.xxx
		// console.log( div.dataset.type );
		// div.dataset.type = '哇哈哈';
		
		console.log( div.dataset.aaa );
		div.dataset.aaa = '哇哈哈哈'


	</script>