DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談JS讀取DOM對象(標簽)的自定義屬性
淺談JS讀取DOM對象(標簽)的自定義屬性
編輯:關於JavaScript     

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("")來獲取自定義的標簽屬性的值。

以上這篇淺談JS讀取DOM對象(標簽)的自定義屬性就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved