JS 进阶(6) DOM属性：Property 固有属性、Attribute 自定义属性、常用的固有属性

HTML属性分为两种

1. Property 固有属性
2. Attribute 自定义属性

• 操作固有属性和自定义属性的通用方法

一、Property 固有属性

1.1 什么是固有属性

固有属性就是浏览器给默认给html标签绑定上的属性。

	<a href="#"></a>

固有属性表

1.2 操作固有属性

固有属性可以通过对象.属性名这样方式来设置和获取值。

	<a href="#"></a>
	
	<script type="text/javascript">
		var aEle = document.getElementsByTagName('a')[0];
		aEle.href = 'http://www.baidu.com';
		console.log(aEle.href);

		aEle.className = 'test';
		console.log(aEle.className);
	</script>

二、Attribute 自定义属性

1.1 什么是自定义属性

自定义属性就是用户自己定义，在固有属性列表中没有的属性。

	<div href="http://www.baidu.com" xxx="aaa" data="test"></div>

1.2 获取自定义属性

通过attributes属性可以获取到在元素标签上定义的所有属性（包括固有属性和自定义属性），是一个类数组对象NameNodeMap

	<div id="div0" href="http://www.baidu.com" xxx="aaa" data="test"></div>
	<script type="text/javascript">
		var divEle = document.querySelector('div');
		console.log(divEle.attributes);
	</script>

获取自定义属性的值

• 获取元素上没有的属性，控制台会报错。
• 也可以获取到 定义在标签 上固定属性的值。

写法一：
ele.attributes.getNamedItem('属性名').nodeValue

写法二：
ele.attributes['属性名'].nodeValue

删除自定义属性

	ele.attributes.removeNamedItem('属性名')

添加自定义属性

	var attr = document.createAttribute('data-title');
	attr.value = '苟';
	document.querySelector('div').attributes.setNamedItem(attr);

三、操作固有属性和自定义属性的通用方法

• getAttribute() 获取自定义属性或固有属性的值。
• setAttribute()

3.1 getAttribute()

虽然和通过getAttribute()获取自定义属性或固有属性的值。

有些固有属性通过.和getAttribute()获取到的是不同的

	<div id="box" style="color:red" onclick="alert(0)"></div>
	<script>
		var divEle = document.querySelector('#box');

		console.log(divEle.getAttribute('onclick'));
		console.log(divEle.onclick);

		console.log(divEle.getAttribute('style'));
		console.log(divEle.style);
	</script>

所以一般只有在取自定义值的时候才用getAttribute（）

3.2 setAttribute()

设置元素属性的值，如果设置一个元素不存在的属性，就会创建并赋值。
语法：

	div.setAttribute('属性名','属性值');

使用setAttribute()设置固有属性会存在浏览器差异，并且IE7及更早版本不支持

3.3 removeAttribute()

移除自定义属性，固有属性无法移除。

	div.removeAttribute('属性名')

---

四、常见的固有属性

固有属性是可以通过.动态修改和获取的。

固有属性中分类

• 布尔属性
  1. checked
  2. selected
  3. readonly：表单只读，可以提交到后台
  4. disabled：表单禁用，提交了也不能被后端收到
  5. mulitiple
  6. hidden：隐藏元素不占用任何空间，相当于display：none
• 字符串属性
  7. id
  8. title
  9. href
  10. src
  11. lang
  12. dir
  13. accesskey
  14. name
  15. value
  16. class
• data属性
  17. 所有以data开头的属性

4.1 checked

控制表单元素的选中

<input type="radio"/>
<input type="checkbox"/>

HTML上设置固有属性选中

<input type="checkbox" checked="checked"/>北京
<input type="checkbox" checked/>香港
<input type="checkbox" checked="任意字符串"/>厦门

js中设置固有属性选中

var inputs = document.querySelectorAll('input');

选中
input[0].checked = true;
input[0].checked = 1;
input[0].checked = 'checked';	只要是非空字符串都会转化true


不选中
input[0].checked = false;
input[0].checked = 0;
input[0].checked = "";

4.2 selected

设置下拉列表选中。

<select name="test" id="test">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

HTML上设置固有属性选中

	<option value="1" selected="selected">1</option>

js中设置固有属性选中

	var selectEle = document.getElementById('test');
	var options = selectEle.options;	获得所有的选项
	
	options[0].selected = true;
	options[0].selected = 1;

	var selectedOption =  selectEle.options[selectEle.selectedIndex]; 这样可以获取当前被选中选项的html元素

可以使用onchange事件监听<select>的变化

4.3 readonly

设置输入框只能读，不能输入。表单提交以后，是可以获取到值的。

HTML元素上设置

<input type="text" readonly="readonly"/>

js中设置

	var inputEle = document.getElementsByTagName('input')[0];
	inputEle.readOnly = true;	注意，这里readOnly O是要大写的

4.4 disabled

让表单元素失灵，设置为disabled的表单就算提交了，后端也不会收到。 大多数表单元素都可以是使用。

HTML元素上设置

<input type="text" disabled="disabled"/>
<input type="text" disabled/>

js中设置

	var inputEle = document.getElementsByTagName('input')[0];
	inputEle.disabled = true;	

4.5 mulitiple

将下拉列表设置为多选。按shift多选。
HTML元素上设置

<select name="test" id="test" mulitiple="mulitiple">
	....
</select>

js中设置

	var selectEle = document.getElementById('test');
	selectEle.mulitiple = true;

4.6 hidden

这是html5新增属性，隐藏元素不占用任何空间，相当于display：none。
HTML元素上设置

	<div id="div0" hidden="hidden"></div>

js中设置

	var div = document.getElementById('div0');
	div.hidden = true;		元素不显示
	div.hidden = false;		元素显示

4.11 lang

<html lang="zh"></html>
<html lang="en"></html>

4.12 accesskey

设置表单获取角度的快捷键。alt+‘按键’

<input type="text" accesskey="s"/>
按alt+s可以将焦点停在当前输入框

4.16 class

设置元素的class属性

在js中设置class有点特殊，因为class是js的关键字，所以使用className设置

		var divEle = document.querySelector('#box');
		div.className = "test";

4.17 data属性

在js中dataset存储了在一个对象上定义的所有以data开头的自定义属性

	<div id="box" data-title="test1" data-toggle="test2" data-xxx="test3" data-xxx-yyy="test4" data-ce-shi="test5"></div>
	<script>
		var divEle = document.querySelector('#box');
		获取方式
		console.log(divEle.dataset.title);
		console.log(divEle.dataset.toggle);
		console.log(divEle.dataset.xxx);
		console.log(divEle.dataset.xxxYyy);
		console.log(divEle.dataset.ceShi);
	</script>

IE8及更早不支持，移动端可以放心使用