这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇浅谈 JS 读取 DOM 对象 (标签) 的自定义属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
DOM 对象对于 js 来说,是个很基础的元素,我们写 js 一般来说,都一定会对它进行操作。我们可以很方便地给它加上自定义的属性,比如:
- <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 对象 (标签) 的自定义属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0521/330352.html