浅谈JS读取DOM对象(标签)的自定义属性
更新时间：2016年11月21日 09:29:59 投稿：jingxian
下面小编就为大家带来一篇浅谈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对象(标签)的自定义属性就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- JavaScript文档对象模型DOM
- JavaScript Dom对象的操作
- JavaScript 中的文档对象模型 DOM
- JavaScript变量Dom对象的所有属性
- JS实现访问DOM对象指定节点的方法示例
- js基础之DOM中document对象的常用属性方法详解
- js基础之DOM中元素对象的属性方法详解
- JavaScript实现DOM对象选择器
- JavaScript DOM 对象深入了解
- JavaScript——DOM操作——Window.document对象详解
- jquery对象和javascript对象即DOM对象相互转换
- js对象关系图 方便dom操作
- javascript DOM对象的学习实例代码
- JavaScript操作DOM对象详解
相关文章
这篇文章主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了JavaScript实现移动端横竖屏检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文给大家分享一段js代码实现搜索框文字可删除功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2016-12-12
这篇文章主要介绍了小程序如何自主实现拦截器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了ant design中实现table的表格行的拖拽，文章围绕table表格行拖拽实现的相关资料展开详细的代码内容，具有一定的参考价值，需要的小伙伴可以参考一下2022-03-03
本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了微信小程序实战之上拉加载、分页加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家详细介绍了微信小程序自定义select下拉选项框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了JS实现json对象数组按对象属性排序操作,涉及javascript使用sort方法针对json数组的遍历与排序相关操作实现技巧,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了微信小程序tabBar用法,结合实例形式详细分析了微信小程序中tabBar的功能、配置项使用方法与操作注意事项,并附带完整demo源码供读者下载参考,需要的朋友可以参考下2017-12-12
最新评论