js，关于为DOM对象添加自定义属性

最新推荐文章于 2023-07-16 23:21:02 发布

weixin_30782293

最新推荐文章于 2023-07-16 23:21:02 发布

阅读量1k

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/cly84920/archive/2008/08/19/4427125.html

版权

DOM对象对于js来说，是个很基础的元素，我们写js一般来说，都一定会对它进行操作。我们可以很方便地给它加上自定义的属性，比如：

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可以访问吗？做了个实验，如下：

=======================test===========================

<!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.οnlοad=function(){
   var test = document.getElementById("test");
   test.adang = "adang";
   alert(test.adang);
}
</script>
<body>
<div id="test"></div>
</body>
</html>
=====================================================

用js来扩展自定义属性，结果很正常地输出了我们想要的结果，IE和FF下都正常。

然后我又写了第二段代码，如下：

=========================test==========================

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

转载于:https://www.cnblogs.com/cly84920/archive/2008/08/19/4427125.html

weixin_30782293

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js，关于为DOM对象添加自定义属性

DOM对象对于js来说，是个很基础的元素，我们写js一般来说，都一定会对它进行操作。我们可以很方便地给它加上自定义的属性，比如：<div id="test" class="hello"></div>var test = document.getElementById("test");test.adang = "adang";alert(test.adang);...
复制链接

扫一扫