獲取或操作DOM元素特性的幾種方式

通過元素的屬性

可以直接通過元素屬性獲取或操作特性，但是隻有公認的特性（非自定義的特性），例如id、title、style、align、className等，注意，因為在ECMAScript中，class是保留字（在ES6中成了關鍵字），所以就不能再用class這個屬性名來表示元素的CSS類名了，只能換成className。

通過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獲取得到的則是相應函式程式碼的字串。

通過元素的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，最後才是第三種方式。