DOM属性
属性的分类
固有属性
在浏览器控制台中的properties选项中能够看到
title也是固有属性，只不过我们没有设置它的值，因此为空字符串。
属性的继承性：
自定义属性
自己定义的属性。
如果定义了同名的属性，以第一个为准。
属性的名字都为小写字母，即使定义的时候用了大写，最终也会转换为小写。
访问自定义属性
通过nodeValue可以访问所选自定义属性的值。
getNamedItem这个方法不能获取未定义的固有属性节点，如果显示定义赋值了，可以获取。
删除自定义属性
创建自定义属性
第一个参数必须是属性对象。
访问固有属性
对象.属性
主流浏览器这种方式访问自定义属性会返回undefined，但在IE上是可以访问的，但不推荐。
通用操作属性的方法
getAttribute()可以获得指定属性名的属性值
注意：
1.参数大小写不敏感
2.有些固有属性通过 对象.属性 和 getAttribute()方法 获得的值是不同的
如：访问style， onclick这两个固有属性时，使用getAttribute方法，返回的是属性值的内容，使用“.”方法返回的是对象。 所以一般只有在取自定义属性值的时候才用getAttribute()。
谷歌和IE8 结果一致
谷歌浏览器和IE8结果一致
div.setAttribute(属性名，属性值)；为指定的节点设置属性和属性值；
既可以创建新的属性值，也可以修改已有值；
在设置固有属性时，存在兼容问题，ie8及以上支持
removeAttribute(‘属性名’)
删除一个属性
所有浏览器都兼容。未定义的固有属性是不能通过该方法删除的。
常见固有属性
布尔属性
控制元素某一状态的，比较特殊的属性。
上述是用js代码，让checkbox选中。
这里的值只要是非空字符串就可以，使checkbox。转换为布尔值是false就是不选中。但在IE7及以下浏览器是不生效的。还是建议用标准的方式来写。
总结：
不管把属性值设置成什么，都会自动的转化为true 或者 false , 不推荐此方法 IE7及一下不支持 如：checked ( 默认选中 , 一般用于checkbox) selected ( 默认选中 ,一般用于option) readOnly（O必须大写） (不能修改数据 , 但不影响数据传输 , 后端仍然可以获得该数据) disabled （提交后后端不会获得该数据） multiple ( 多选 , 按住ctrl和shift可以多选)可以让下拉菜单变成列表菜单 hidden ( 隐藏 )；Html5新增属性 JavaScript操作这些固有属性还是用 node.property
关于checked属性不能通过removeAttibute方法删除的理解：
因为代码中设置的方法并没有添加在dom上（简单来说，它实际上是没有被显示定义的）
所以通过removeAttribute方法删除不掉。
如果想要删除，这里有一个特殊的知识点 ，html里的属性和dom中的属性大多数名称是一样的，但是有些不相同。比如html的checked, selected, value属性，对应dom对象里的名称叫defaultChecked，defaultSelected，defaultValue，而不是原名。例如：
然后再使用方法移除
字符串属性
id：表示元素的唯一标识；一个页面上不能出现相同id值的两个元素 title：可见元素在鼠标掠过时出现的提示信息 href：一般用于a和link这两个元素，表示超链接 src：用于image、script、object等等，表示数据的来源 lang：是language，表示辅助搜索引擎或者印刷机、读音器等等使用的属性 dir：用与文本的输出方向，一般有两个方向（ltr和rtl）伴着<bdo></bdo>出现 accesskey：表示某个组合键，通过键盘的快捷键使某个元素被选中。例：谷歌浏览器中，按住alt + 设置的按键，就可以快捷选中对应元素 name：一般用于表单元素，表示控件的名字 value：一般用于表单元素，是控件要传到后端的值 class：定义在元素上引用的样式
W3C全局属性
contenteditable：是否可编辑元素的内容，一般和spellcheck组合使用，如果内容可编辑，判断它的语法是否正确 hidden：可以隐藏一个元素，元素设置为hidden后既隐藏，但是可以通过js去掉这个属性，让它显示出来
spellcheck：一般和contenteditable组合使用，如果内容可编辑，判断它的语法是否正确
style：可以定义某个元素的样式
tabindex：规定当使用“tab”键进行导航时元素的顺序
translate：规定是否应该翻译元素内容，目前所有的主流浏览器都无法正确支持该属性
data属性
近几年引入的新属性，它的名字都以 data- 开头，这个属性用于存储页面或应用程序的私有定义数据。
在jQuery UI、bootstrap这些流行库中，它们被用于作为组件的配置信息使用。
理解：
js中用dataset获取（浏览器设置好的）如果是data后面-，直接换成点 . 就好。
如果是多个-分隔 的，字符串，用驼峰来获取如data-xxx-yyy，则dataset.xxxYyy 对于设置私有属性，可以使用新增属性："data-xxxx"。js中用dataset来获取此类属性的集合。
如果data-后面是一个单词，比如：data-one，那么使用：Ele.dataset.one来获取属性值；
如果data-后面不是一个单词，比如：data-one-two，那么使用：Ele.dataset.oneTwo(驼峰形式)来获取属性值
注意：dataset属性具有兼容性问题！IE8及以下不兼容
class属性
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>class attributes</title> 7 <script src="domReady.js"></script> 8 <script> 9 var CC = { 10 getClass: function(ele) { //获取类 11 return ele.className.replace(/\s+/, " ").split(" "); 12 }, 13 14 hasClass: function(ele, cls) { //判断是否有某个类 15 return -1 < (" " + ele.className + " ").indexOf(" " + cls + " "); 16 }, 17 18 addClass: function(ele, cls) { //添加类 19 if (!this.hasClass(ele, cls)) 20 ele.className += " " + cls; 21 }, 22 23 removeClass: function(ele, cls) { //删除某个类 24 if (this.hasClass(ele, cls)) { 25 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)', "gi"); 26 ele.className = ele.className.replace(reg, " "); 27 } 28 }, 29 30 toggleClass: function(ele, cls) { //如果传入的类名在元素上定义过，就删除这个类；如果没定义过，就增加这个类。 31 if (this.hasClass(ele, cls)) { 32 this.removeClass(ele, cls); 33 } else { 34 this.addClass(ele, cls); 35 } 36 } 37 }; 38 39 myReady(function() { 40 var body = document.body; 41 console.log(CC.getClass(body)); 42 console.log(CC.hasClass(body, 'bbb')); 43 CC.addClass(body, 'ccc'); 44 CC.removeClass(body, 'aaa'); 45 CC.toggleClass(body, 'bbb'); 46 }); 47 </script> 48 </head> 49 <body class="aaa bbb aaa"> 50 TEST 51 </body> 52 </html>
classList属性
在一些比较新的浏览器中，元素节点的一个新属性。IE11以下不支持。
这个属性中有add、remove、contains、toggle等方法。
元素.classList.方法名(参数)
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>classList</title> 7 <script src="domReady.js"></script> 8 <script> 9 var CL = { 10 addClass: function(ele, cls) { 11 ele.classList.add(cls); 12 }, 13 14 removeClass: function(ele, cls) { 15 ele.classList.remove(cls); 16 }, 17 18 hasClass: function(ele, cls) { 19 return ele.classList.contains(cls); 20 }, 21 22 toggleClass: function(ele, cls) { 23 return ele.classList.toggle(cls); 24 } 25 }; 26 27 myReady(function() { 28 var body = document.body; 29 console.log(CL.hasClass(body, 'bbb')); // true 30 CL.addClass(body, 'ccc'); 31 CL.removeClass(body, 'aaa'); 32 CL.toggleClass(body, 'bbb'); 33 34 setTimeout(function(){ 35 alert(document.body.classList.toString()); //ccc 36 },2000); 37 }); 38 </script> 39 </head> 40 <body class="aaa bbb aaa"> 41 TEST 42 </body> 43 </html>
