獲取或操做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. 經過元素的 attribute 屬性

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，有以下代碼

例如要獲取id，有以下代碼

let div = document.getElementById("my-div");
div.attributes.getNamedItem("id").nodeValue;
div.attributes["id"].nodeValue; //後兩行代碼均可以獲取到id，下面爲簡寫形式

 

從上面能夠看出，這種方式最麻煩，因此平時基本不用，通常在遍歷元素的特性時纔會用到。
上面三種方式中，方式1是最常使用的，其次是2，最後纔是第三種方式。