脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → dom自定义属性

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

 更新时间：2016年11月21日 09:29:59   投稿：jingxian  
下面小编就为大家带来一篇浅谈JS读取DOM对象(标签)的自定义属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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对象(标签)的自定义属性就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js在HTML的三种引用方式详解

    js在HTML的三种引用方式详解

    这篇文章主要介绍了js在HTML的三种引用方式详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • JS 获取select(多选下拉)中所选值的示例代码

    JS 获取select(多选下拉)中所选值的示例代码

    通过js获取select(多选下拉)中所选值，具体实现如下，有需要的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • 详解JavaScript引擎V8执行流程

    详解JavaScript引擎V8执行流程

    本文主要讲解的是V8的技术，是V8的入门篇，主要目的是了解V8的内部机制，希望对前端，快应用，浏览器，以及nodejs同学有些帮助。这里不涉及到如何编写优秀的前端，只是对JS内部引擎技术的讲解
    2021-06-06
  • 原生JavaScript实现滑动拖动验证的示例代码

    原生JavaScript实现滑动拖动验证的示例代码

    这篇文章主要介绍了原生JavaScript实现滑动拖动验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 页面中js执行顺序

    页面中js执行顺序

    页面中js的执行顺序：在页面的head标签中添加一段js代码，在页面的尾部也就是</body>之前添加一段代码，然后在body的onload事件中引用一个函数，此三者的执行顺序如何?
    2009-11-11
  • layui select获取自定义属性方法

    layui select获取自定义属性方法

    今天小编就为大家分享一篇layui select获取自定义属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 符合W3C网页标准的iframe标签的使用方法

    符合W3C网页标准的iframe标签的使用方法

    符合W3C网页标准的iframe标签的使用方法...
    2007-07-07
  • 鼠标滚轮改变图片大小的示例代码

    鼠标滚轮改变图片大小的示例代码

    这篇文章主要是对用鼠标滚轮改变图片大小的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JS表单验证的代码(常用)

    JS表单验证的代码(常用)

    最近没有项目做，有点空余时间，小编把日常比较常用的js表单验证代码整理分享到脚本之家平台，供大家学习，需要的朋友参考下吧
    2016-04-04
  • 浅谈JavaScript事件绑定的常用方法及其优缺点分析

    浅谈JavaScript事件绑定的常用方法及其优缺点分析

    下面小编就为大家带来一篇浅谈JavaScript事件绑定的常用方法及其优缺点分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论