浅谈JS读取DOM对象(标签)的自定义属性
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了浅谈JS读取DOM对象(标签)的自定义属性,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2373字,纯文字阅读大概需要4分钟。
内容图文
![浅谈JS读取DOM对象(标签)的自定义属性](/upload/InfoBanner/zyjiaocheng/305/f8c48fc5de0a4f0d9daff8b920940322.jpg)
<div id="test" class="hello"></div> 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可以访问吗?做了个实验,如下:
<!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来扩展自定义属性,结果很正常地输出了我们想要的结果,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标签上。IE下正常输出adang,FF下输出的是undefined。
但是很奇怪的,如果使用DOM提供的方法getAttribute(""),无论是在IE下,还是FF下,都可以得到我们写在标签中的自定义属性。
所以,为了兼容,我们要使用getAttribute("")来获取自定义的标签属性的值。
内容总结
以上是互联网集市为您收集整理的浅谈JS读取DOM对象(标签)的自定义属性全部内容,希望文章能够帮你解决浅谈JS读取DOM对象(标签)的自定义属性所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。