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'

  最后一种是规范的自定义特性，比较推荐的