首頁  >  文章  >  web前端  >  javascript如何讀取dom物件的屬性實作程式碼詳解

javascript如何讀取dom物件的屬性實作程式碼詳解

伊谢尔伦
伊谢尔伦原創
2017-07-20 11:50:461521瀏覽

DOM物件對於js來說,是個很基礎的元素,我們寫js一般來說,都一定會對它進行操作。我們可以很方便地為它加上自訂的屬性,例如:


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

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

test.adang = "adang";

alert(test.adang);

我們會發現,已經為這個id為test的DOM元素加入了一個叫做adang的屬性了,然後在js中,可以呼叫這個屬性。在寫js的時候常用到這種方法,可以很方便地對某個dom物件添加一些特殊的數據,感覺DOM物件就像一個很好用的容器,可以放一堆數據進去。

像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>
<p id="test"></p> 
</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>
<p id="test" adang="adang"></p> 
</body>
</html>

這次把擴充功能的屬性寫到了html標籤上。 IE下正常輸出adang,FF下輸出的是undefined。

但是很奇怪的,如果使用DOM提供的方法getAttribute(""),無論是在IE下,還是FF下,都可以得到我們寫在標籤中的自訂屬性。

所以,為了相容,我們要使用getAttribute("")來取得自訂的標籤屬性的值。

以上是javascript如何讀取dom物件的屬性實作程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn