快捷導(dǎo)航

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

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

下面小編就為大家?guī)?lái)一篇淺談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

<div id="test" class="hello"></div>

var test = document.getElementById("test");

test.adang = "adang";

alert(test.adang);

我們會(huì)發(fā)現(xiàn)，已經(jīng)給這個(gè)id為test的DOM元素添加了一個(gè)叫做adang的屬性了，然后在js中，可以調(diào)用這個(gè)屬性。我在寫js的時(shí)候經(jīng)常用到這種方法，可以很方便地對(duì)某個(gè)dom對(duì)象添加一些特殊的數(shù)據(jù)，感覺(jué)DOM對(duì)象就像一個(gè)很好用的容器，可以放一堆數(shù)據(jù)進(jìn)去。

進(jìn)一步想到一個(gè)問(wèn)題，這些屬性可以在js中添加，那么是否可以像flex一樣，在標(biāo)簽中添加呢？事實(shí)上，像id啊，src啊這樣的屬性，都是可以在 js中添加，也可以在標(biāo)簽上添加的，兩種方式j(luò)s都可以獲取數(shù)據(jù)。這里要說(shuō)一點(diǎn)，class比較特殊，標(biāo)簽中用的是class，在js中調(diào)用卻要用 className才行。

像id啊，title，src此類html中支持的屬性，可以在標(biāo)簽中設(shè)置，然后js訪問(wèn)。那么，如果是像我上面例子中的adang這樣自定義的屬性呢？DOM可以訪問(wèn)嗎？做了個(gè)實(shí)驗(yàn)，如下：

<!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來(lái)擴(kuò)展自定義屬性，結(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>

這次把擴(kuò)展的屬性寫到了html標(biāo)簽上。IE下正常輸出adang,FF下輸出的是undefined。

但是很奇怪的，如果使用DOM提供的方法getAttribute(""),無(wú)論是在IE下，還是FF下，都可以得到我們寫在標(biāo)簽中的自定義屬性。

所以，為了兼容，我們要使用getAttribute("")來(lái)獲取自定義的標(biāo)簽屬性的值。

以上這篇淺談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: