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

2021-09-02 04:55:06 字數 1692 閱讀 9237

通過元素的屬性

可以直接通過元素屬性獲取或操作特性,但是只有公認的特性(非自定義的特性),例如idtitlestylealignclassname等,注意,因為在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元素特性的幾種方式

通過元素的屬性 可以直接通過元素屬性獲取或操作特性,但是只有公認的特性 非自定義的特性 例如id title style align classname等,注意,因為在ecmascript中,class是保留字 在es6中成了關鍵字 所以就不能再用class這個屬性名來表示元素的css類名了,只能換...

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

可以直接通過元素屬性獲取或操作特性,但是只有公認的特性 非自定義的特性 例如id title style align classname等,注意,因為在ecmascript中,class是保留字 在es6中成了關鍵字 所以就不能再用class這個屬性名來表示元素的css類名了,只能換成classna...

Dom獲取元素的幾種方式

通過id獲取獲取元素 document.getelementbyid 通過標籤名獲取元素 集合 document.getelementbytagname 通過class獲取元素 集合 ie9失效 document.getelementbyclassname 封裝getbyclass 方法一 func...