获取或操做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，最后才是第三种方式。