浅谈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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
JS实现验证码倒计时的注册页面
Jan 02 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 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 调试利器debug_print_backtrace()
2012/07/23 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
Bootstrap Table从零开始
2017/06/30 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python制作刷网页流量工具
2017/04/23 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python pycharm的安装及其使用
2019/10/11 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
新教师工作感言
2014/02/16 职场文书
学校评语大全
2014/05/06 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
人事任命书范本
2015/09/21 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python