元素属性

获取属性

• 可通过element.属性，只能获取内置属性值
• 可通过getAttribute()方法，用于获取自定义属性

<div id="test" data-index="test01"></div>

<script>
	var myDiv = document.querySelector('div');
	console.log(myDiv.id);
	console.log(myDiv.getAttribute('data-index'));
</script>

设置属性

• 与获取属性相同，element.属性只能设置内置属性，setAttribute(属性，值)方法设置自定义属性

<div id="test" data-index="test01"></div>

<script>
	var myDiv = document.querySelector('div');
	myDiv.id = 'test000';
	myDiv.setAttribute('data-index','002');
	console.log(myDiv);
</script>

• setAttribute()方法可为元素新增属性

<div></div>

<script>
	var myDiv = document.querySelector('div');
	myDiv.setAttribute('data-index','002');
	console.log(myDiv);
</script>

• setAttribute()中的值带引号表示字符串，不带表示其他数据类型

移除属性

• 使用removeAttribute()方法，一次只能移除一个属性

<div id="test" data-index="test01"></div>

<script>
	var myDiv = document.querySelector('div');
	myDiv.removeAttribute('id');
	console.log(myDiv);
</script>

自定义属性

• 为规范自定义属性名，自定义属性需要以data开头，-分隔单词，如data-index
• H5新增获取自定义属性方法element.dataset或者element.dataset[’’]，其后为除了data的自定义单词

<div data-test="test" data-index="01"></div>

<script>
	var myDiv = document.querySelector('div');
	console.log(myDiv.dataset.test);
	console.log(myDiv.dataset['index']);
</script>

• dataset是一个对象

<div data-test="test" data-index="01"></div>

<script>
	var myDiv = document.querySelector('div');
	console.log(myDiv.dataset);
</script>

• 若自定义属性名较长，注意改为驼峰命名，如data-test-list改为testList

<div data-test-list="test"></div>

<script>
	var myDiv = document.querySelector('div');
	console.log(myDiv.dataset.testList);
</script>

• 此方法存在较大兼容性问题，IE11才开始支持