快捷導(dǎo)航

淺談JS讀取DOM對象(標(biāo)簽)的自定義屬性

更新時間：2016年11月21日 09:29:59 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談JS讀取DOM對象(標(biāo)簽)的自定義屬性。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

DOM對象對于js來說，是個很基礎(chǔ)的元素，我們寫js一般來說，都一定會對它進行操作。我們可以很方便地給它加上自定義的屬性，比如：

<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ù)進去。

進一步想到一個問題，這些屬性可以在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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: