浅谈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 相关文章推荐
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
JavaScript实现刮刮乐效果
Nov 01 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产生动态的影像图
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
回顾Javascript React基础
2019/06/15 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python利用小波分析进行特征提取的实例
2019/01/09 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
什么是事务?为什么需要事务?
2012/01/09 面试题
物业工作计划书
2014/01/10 职场文书
护士求职自荐信范文
2014/03/19 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
公司副总经理任命书
2014/06/05 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
创业计划书之家教托管
2019/09/25 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android