獲取或操作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就是特性的值。它有一些方法，如下：

let div = document.getelementbyid("my-div");
div.attributes.getnameditem("id").nodevalue;
div.attributes["id"].nodevalue;                 //後兩行**都可以獲取到id，下面為簡寫形式

從上面可以看出，這種方式最麻煩，所以平時基本不用，一般在遍歷元素的特性時才會用到。

上面三種方式中，方式1是最常使用的，其次是2，最後才是第三種方式。

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

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

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

Dom獲取元素的幾種方式

相關推薦