DOM物件對於js來說,是個很基礎的元素,我們寫js一般來說,都一定會對它進行操作。我們可以很方便地為它加上自訂的屬性,例如:
<div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang);
我們會發現,已經為這個id為test的DOM元素增加了一個叫做adang的屬性了,然後在js中,可以呼叫這個屬性。我在寫js的時候常用到這種方法,可以很方便地對某個dom物件添加一些特殊的數據,感覺DOM物件就像一個很好用的容器,可以放一堆數據進去。
進一步想到一個問題,這些屬性可以在js中添加,那麼是否可以像flex一樣,在標籤中添加呢?事實上,像id啊,src啊這樣的屬性,都是可以在 js中添加,也可以在標籤上添加的,兩種方式js都可以取得資料。這裡要說一點,class比較特殊,標籤用的是class,在js中呼叫卻要用 className才行。
像id啊,title,src此類html中支援的屬性,可以在標籤中設置,然後js存取。那麼,如果是像我上面例子中的adang這樣自訂的屬性呢? DOM可以訪問嗎?做了個實驗,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <script type="text/javascript"> window.onload=function(){ var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); } </script> <body> <div id="test"></div> </body> </html>
用js來擴展自訂屬性,結果很正常地輸出了我們想要的結果,IE和FF下都正常。
接著我又寫了第二段程式碼,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <script type="text/javascript"> window.onload=function(){ var test = document.getElementById("test"); alert(test.adang); } </script> <body> <div id="test" adang="adang"></div> </body> </html>
這次把擴充的屬性寫到了html標籤上。 IE下正常輸出adang,FF下輸出的是undefined。
但是很奇怪的,如果使用DOM提供的方法getAttribute(""),無論是在IE下,還是FF下,都可以得到我們寫在標籤中的自訂屬性。
所以,為了相容,我們要使用getAttribute("")來取得自訂的標籤屬性的值。