浅谈JS读取DOM对象(标签)的自定义属性

前端之家收集整理的这篇文章主要介绍了浅谈JS读取DOM对象(标签)的自定义属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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可以访问吗?做了个实验,如下:

new document

这次把扩展的属性写到了html标签上。IE下正常输出adang,FF下输出的是undefined。

但是很奇怪的,如果使用DOM提供的方法getAttribute(""),无论是在IE下,还是FF下,都可以得到我们写在标签中的自定义属性

所以,为了兼容,我们要使用getAttribute("")来获取自定义标签属性的值。

以上这篇浅谈JS读取DOM对象(标签)的自定义属性就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章