浅谈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控制上传文件的大小
Oct 26 Javascript
javascript 禁止复制网页
Jun 11 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
javascript实现行拖动的方法
May 27 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
layui中的switch开关实现方法
Sep 03 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自定义函数实现代码
2011/12/30 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
JSONP基础知识详解
2017/03/19 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
对python 生成拼接xml报文的示例详解
2018/12/28 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
cf战队收人口号
2014/06/21 职场文书
素质教育标语
2014/06/27 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript