獲取或操作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，最后才是第三種方式。