Rumah > Artikel > hujung hadapan web > javascript如何读取dom对象的属性实现代码详解

javascript如何读取dom对象的属性实现代码详解

伊谢尔伦asal: 2017-07-20 11:50:461518semak imbas

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("")来获取自定义的标签属性的值。

Atas ialah kandungan terperinci javascript如何读取dom对象的属性实现代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：如何分别使用javascript和jquery来检测dom节点存在的方法实例详解Artikel seterusnya：什么是jQuery对象？如何把jQuery对象转成DOM对象实例详解

Artikel berkaitan

Lihat lagi