浅谈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 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
加载jQuery后$冲突的解决办法
Jul 09 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
在react中使用vue的状态管理的方法示例
May 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue接口请求加密实例
2020/08/11 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
大学自我鉴定范文
2013/12/26 职场文书
党员创先争优活动总结
2014/05/04 职场文书
实验室的标语
2014/06/20 职场文书
组工干部对照检查材料
2014/08/25 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
公司开除员工通知
2015/04/22 职场文书
高一化学教学反思
2016/02/22 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
python如何读取.mtx文件
2021/04/22 Python