获取或操作DOM元素特性的几种方式

1. 通过元素的属性

   可以直接通过元素属性获取或操作特性，但是只有公认的特性（非自定义的特性），例如id、title、style、align、className等，注意，因为在ECMAScript中，class是保留字（在ES6中成了关键字），所以就不能再用class这个属性名来表示元素的CSS类名了，只能换成className。

2. 通过getAttribute()、setAttribute()、removeAttribute()

   也可以通过这三个DOM方法来操作DOM元素的特性，例如

   let div = document.getElementById("my-div");
   div.getAttribute("id");                 // 获取id
   div.getAttribute("title");              // 获取title
   div.getAttribute("class");              // 获取元素的CSS类名，因为是传参数给getAttrbute函数，所以可以用class
   div.getAttribute("dat-my-attribute");   // 获取自定义特性
   div.setAttribute("id","anotherId");     // 设置id
   div.removeAttribute("title");           // 删除title
   

   从上面可以看出来，用这种方法，不仅可以获取到公认的特性，也可以获取自定义的特性。不过有两类特殊的特性，在通过属性获取和通过方法获取时获取到的却不一样，一类是style，通过属性访问获取到的是一个对象，通过getAttribute获取到的是CSS文本；另一类就是事件处理程序如onclick，通过属性获取，得到的是一个函数，而通过getAttribute获取得到的则是相应函数代码的字符串。

3. 通过元素的attributes属性

   Element类型的DOM元素都有一个attributes属性，如div.attributes，这样获取到的是一个NamedNodeMap，是一个动态的集合，和数组类似，也有length属性、可以通过下标访问遍历等,通常用途就是遍历元素特性，里面存放的是多个Att节点，每个节点的nodeName就是特性名称，nodeValue就是特性的值。它有一些方法，如下：

   • getNamedItem(name)：返回nodeName为name的节点
   • setNamedItem(node)：向集合中插入一个Attr节点
   • removeNamedItem(name)：删除集合中nodeName为name的节点
   • item(pos)：返回位于数字pos位置的节点
     例如要获取id，有如下代码

   let div = document.getElementById("my-div");
   div.attributes.getNamedItem("id").nodeValue;
   div.attributes["id"].nodeValue;                 //后两行代码都可以获取到id，下面为简写形式
   

   从上面可以看出，这种方式最麻烦，所以平时基本不用，一般在遍历元素的特性时才会用到。
   上面三种方式中，方式1是最常使用的，其次是2，最后才是第三种方式。