淺談JS讀取DOM物件(標籤)的自訂屬性
- 高洛峰原創
- 2016-12-06 13:06:021582瀏覽
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("")來取得自訂的標籤屬性的值。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn