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


Posted in Javascript onNovember 21, 2016

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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
JS中substring与substr的用法
Nov 16 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
AngularJS Phonecat实例讲解
Nov 21 #Javascript
浅谈React 属性和状态的一些总结
Nov 21 #Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 #Javascript
jQuery用FormData实现文件上传的方法
Nov 21 #Javascript
遍历js中对象的属性和值的实例
Nov 21 #Javascript
JavaScript数据结构链表知识详解
Nov 21 #Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 #Javascript
You might like
php实现的CSS更新类实例
2014/09/22 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python使用列表的最佳方案
2020/08/12 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
2014年健康教育实施方案
2014/02/17 职场文书
小班秋游活动方案
2014/02/22 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
平面设计专业求职信
2014/08/09 职场文书
六年级学生期末评语
2014/12/26 职场文书
美丽心灵观后感
2015/06/01 职场文书
医院见习总结
2015/06/24 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书