DOM-element 特性的读取总结
HTML 元素标准的属性：
id 元素在文档中的唯一标识符
title 附加说明信息
lang 元素内容的代码 很少使用
className 与元素的class 特性对应
dir 语言的方向 很少使用
1，取得特性
getAttribute() 给定名称的特性不存在时 返回null
2，设置特性
setAttrbuite() 接受两个参数 要设置的特性名和值(该方法既可以操作html特性也可操作自定义特性)，通过该方法设置的特性名会被统一转化为小写形式
如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在 setAttribute()则创建该属性并设置相应的值
如：div.setAttribute("class","ft") (在IE8之前的版本通过该方法设置class和style是没有任何效果的，事件处理程序特性时也一样)
注意：像下面这样为DOM元素添加一个自定义的属性，该属性并不会自动成为特性
div.mycolor="red";
alert(div.getAttribute("mycolor")) // null (IE除外)
同样的 为DOM元素设置一个自定义特性 该特性也不会成为属性
<div id="div" mycolor='red'></div>
var div = document.getElementById("div");
console.log(div.mycolor);
console.log(div.getAttribute('mycolor'));
div.setAttribute('mycolor1', 'AAA');
console.log(div.mycolor1);
console.log(div.getAttribute('mycolor1'));
3，删除特性
removeAttribute() 彻底删除元素的特性(IE6及以前版本不支持该方法)
4，attributes（js高程-267）
先大概的介绍下该属性：Element类型是使用attrbutes属性的唯一一个DOM节点类型。attributes属性中包含一个NameNodeMap,与NodeList类似，也是一个"动态"的集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法。
① getNamedItem(name) 返回nodeName属性等于name的节点
② removeNamedItem(name) 从列表中移除nodeName等于name的节点
③ setNamedItem(node) 向列表中添加节点 以节点的NodeName属性为索引
④ item(pos) 返回位于pos位置处的数字
attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。要取得元素的id特性可以：
var id=element.attributes.getNamedItem("id").nodeValue;
var id=element.attributes["id"].Value; (.nodeValue也可以)
也可通过上述两种方法来设置特性的值，即先取得特性的节点，然后再将其nodeValue设置为新值
div.attributes.getNamedItem("id").nodeValue = 'acc';
调用removeNamedItem()方法与在元素上调用removeAttribute()的效果相同：直接删除具有给定名称的特性
如 ： var oldattr = div.attributes.removeNamedItem("id");返回的是被删除特性的attr节点
最后，setNamedItem()是一个很不常用的方法，通过这个方法可以为元素添加一个新特性，为此需要传入特性节点，如下所示。
element.attributes.setAttrbuite(newattr');
每个特性节点都有一个名为"specified"的属性 值为true 则表示是代码指定的还是系统默认的
主要用途：遍历元素的特性
5,检测是否含有某个特性：
element.hasAttribute()
总得来说 有四种添加自定义特性的方法：
前面三种为：(当然也可取标准的特性)
<div id="abc"></div>
var div = document.getElementById('abc');
var attr = document.createAttribute('mycolor');
attr.value = 'red';
//add
div.setAttribute('mycolor','red');
div.setAttributeNode(attr);
div.attributes.setNamedItem(attr);
console.log(div.getAttributeNode('mycolor'));
//get and update
div.getAttribute('mycolor');
div.getAttributeNode('mycolor').nodeValue;
div.attributes.getNamedItem('mycolor').nodeValue== div.attributes['mycolor'].nodeValue;
//delete
div.removeAttribute('mycolor');
div.removeAttributeNode(div.getAttributeNode('mycolor')); 返回的是被删除的对象
div.attributes.removeNamedItem('mycolor'); 返回的是被删除的对象
对比发现 div.getAttributeNode('mycolor') 和 div.attributes.getNamedItem('mycolor') 这两个是同一个对象
alert(div.getAttributeNode('mycolor') === div.attributes.getNamedItem('mycolor')); // true
最后一种为html5的新特性 data-
<div id="abc" data-max='ssss' data-min='jjjj'></div>
var div = document.getElementById('abc');
var data = div.dataset;
console.log(data.max); //'ssss'
最后一种是规范的自定义特性，比较推荐的
