js關于為DOM對象添加自定義屬性的方式和差別

DOM對象的三種在添加自定義屬性的方式

一是 通過 “.”+“屬性名”     

二是 setAttribute()（getAttribute()擷取）

三是 直接在元素标簽上加屬性  如：<div  name="" id="te"  class=""   content=""></div>

三者的差別主要是在擷取屬性值方面：

1.var e = document.getElementById("te");   

2.//擷取屬性   

3.//用 . 來引用，必須是内置的(IE 可以通路自定義屬性)，而且引用的時候，區分大小寫。   

4.alert(e.id);//"test"   

5.alert(e.className);//"cls"   

6.alert(e.ss);//undefined(IE下為 "ss");   

7.  

8.//用getAttribute 來引用，可以通路自定義屬性，不區分大小寫。   

9.alert(e.getAttribute("id"));//"test"   

10.alert(e.getAttribute("ID"));//"test"   

11.//注意浏覽器差異   

12.alert(e.getAttribute("class"));//"cls"(Firefox)   

13.alert(e.getAttribute("className"));//"cls"(IE)   

14.  

15.alert(e.getAttribute("ss"));//"ss"   

16.  

17.//設定屬性   

18./*使用 . 運算符和 setAttribute都可以。但是對于自定義屬性，使用.運算符的設定的屬性無法通過getAttribute擷取，反之亦然。*/  

19.e.setAttribute("abc2","abc2");   

20.e.abc3 = "abc3";   

21.  

22.e.title1 = "abc";   

23.alert(e.getAttribute("title1"));//null  

var e = document.getElementById("test");

//擷取屬性

//用 . 來引用，必須是内置的(IE 可以通路自定義屬性)，而且引用的時候，區分大小寫。

alert(e.id);//"test"

alert(e.className);//"cls"

alert(e.ss);//undefined(IE下為 "ss");

//用getAttribute 來引用，可以通路自定義屬性，不區分大小寫。

alert(e.getAttribute("id"));//"test"

alert(e.getAttribute("ID"));//"test"

//注意浏覽器差異

alert(e.getAttribute("class"));//"cls"(Firefox)

alert(e.getAttribute("className"));//"cls"(IE)

alert(e.getAttribute("ss"));//"ss"

是以  對于style,className的設定，通常是使用" . "運算符來實作