DOM對象對于js來說，是個很基礎(chǔ)的元素，我們寫js一般來說，都一定會對它進(jìn)行操作。我們可以很方便地給它加上自定義的屬性，比如：
<div id="test" class="hello"></div>var test = document.getElementById("test");test.adang = "adang";alert(test.adang);我們會發(fā)現(xiàn)，已經(jīng)給這個id為test的DOM元素添加了一個叫做adang的屬性了，然后在js中，可以調(diào)用這個屬性。我在寫js的時候經(jīng)常用到這種方法，可以很方便地對某個dom對象添加一些特殊的數(shù)據(jù)，感覺DOM對象就像一個很好用的容器，可以放一堆數(shù)據(jù)進(jìn)去。
進(jìn)一步想到一個問題，這些屬性可以在js中添加，那么是否可以像flex一樣，在標(biāo)簽中添加呢？事實上，像id啊，src啊這樣的屬性，都是可以在 js中添加，也可以在標(biāo)簽上添加的，兩種方式j(luò)s都可以獲取數(shù)據(jù)。這里要說一點，class比較特殊，標(biāo)簽中用的是class，在js中調(diào)用卻要用 className才行。
像id啊，title，src此類html中支持的屬性，可以在標(biāo)簽中設(shè)置，然后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來擴展自定義屬性，結(jié)果很正常地輸出了我們想要的結(jié)果，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標(biāo)簽上。IE下正常輸出adang,FF下輸出的是undefined。
但是很奇怪的，如果使用DOM提供的方法getAttribute(""),無論是在IE下，還是FF下，都可以得到我們寫在標(biāo)簽中的自定義屬性。
所以，為了兼容，我們要使用getAttribute("")來獲取自定義的標(biāo)簽屬性的值。
以上這篇淺談JS讀取DOM對象(標(biāo)簽)的自定義屬性就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
