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

赞 (0)

相关推荐

  • javascript转换字符串为dom对象（字符串动态创建dom）

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • 如何判断出一个js对象是否一个dom对象

    我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM对象的各种属性或特征,比如是否有nodeType属性,有tagName属性,等等.判断的特征越多,也就越可靠,因为毕竟我们自定义的js对象也可以有那些属性.还有其他方法吗? 在DOM Level2标准中定义了一个HTMLElement对象,它规定所有的DOM对象都是HTMLElement的实例,

  • 怎样才能用js生成xmldom对象，并且在firefox中也实现xml数据岛？

    一般来说,xml文件都是从外部载入的,那么我们如何只用js生成xml对象呢?下面的程序实现了这一点,只需要输入字符串形式的xml数据,就可以转换为xml对象,并且兼容firefox. 用这种方法,我们也可以在firefox中实现xml数据岛,即用xmp标签来装载xml字符串,然后调用createXml函数来生成xml.    由于firefox中不支持节点的.xml属性,所以需要给它添加该属性,使之与IE一致 复制代码 代码如下: <body> <xmp id=x1>     &l

  • javascript 删除dom对象的事件函数代码

    JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp

  • jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用

  • 解决JS内存泄露之js对象和dom对象互相引用问题

    解决JS内存泄露之js对象和dom对象互相引用问题

    该问题涉及到作用域链,js对象和dom对象互相引用的问题. 因为对于匿名函数而言,其作用域链包含三个对象:匿名函数的变量对象.doTry()的变量对象和全局变量对象.此时doTry函数对象中btn变量引用了dom对象,即doTry函数对象引用dom对象:              然后根据匿名函数包括的对象,dom对象的onclickà匿名函数对象.匿名函数对象àdoTry函数对象,即得dom对象引用doTry().所以解释了互相引用的情况存在,导致内存无法. 解决思路:将互相引用中断. 两种方

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

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes

  • 浅谈js内置对象Math的属性和方法(推荐)

    属性: constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 E 欧拉常量,自然对数的底(约等于2.718) LN2 2的自然对数(约等于0.693) LN10 10的自然对数(约等于2.302) LOG2E 以2为底的e的对数.(约等于1.442) LOG10E 以10为底的e的对数(约等于0.434) PI ∏的值(约等于3.14159) SQRT1_2 1/2(0.5)的平方根(即l除以2的平方根,约等于o.707) SQRT2 2的平方根(约等于1

  • 浅谈JS正则RegExp对象

    目录 1.RegExp对象 2.语法 2.1 定义 2.2 修饰符 2.3 方括号 2.4 元字符 2.5 量词 2.6 方法 1.RegExp对象 正则表达式是描述字符模式的对象. 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. 参考教材:w3cschool | JavaScript RegExp 对象 2.语法 2.1 定义 当使用 构造函数 创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \) /* 比如,以下两种方式的定义是等价的 */ // 构造函

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • 浅谈js对象的创建和对6种继承模式的理解和遐想

    JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫女娲造人吧. 创建对象 女娲一个一个的捏人(创建对象),这样太慢,于是设计了一种机器(函数),想造什么样的,告诉他这个人有哪些特点和功能,机器来制造.这就是工厂模式的(使用同一个接口创建对象,回产生大量重复代码,由此发明了一种函数(模具)). 但是机器造人同样也比较麻烦(挖土.和泥.捏眼睛.捏鼻子...

  • 浅谈js常用内置方法和对象

    JS内置函数不从属于任何对象,在JS语句的任何地方都可以直接使用这些函数.JS中常用的内置函数如下: 1.eval(str)接收一个字符串形式的表达式,并试图求出表达式的值.作为参数的表达式可以采用任何合法的操作符和常数.如果参数中包含JS命令,这些命令也可以被执行,就像这些命令是JS程序的一部分一样. 2.parseInt(str,n)试图从一个字符串中提取一个整数.可附加一个n整数实现返回n进制整数.如果在字符串中存在除了数字.符号.小数点和指数符号以外的字符,就停止转换,返回已有的结果.如

  • 浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处

    [JS对象属性的查询和设置] 可以通过点(.) 或 方括号([]) 运算符来获取属性的值.运算符左侧应当是一个表达式,它返回一个对象.对于点(.)来说,右侧必须是一个以属性名称命名的简单标识符.对于方括号([])来说,方括号里必须是一个计算结果为字符串的表达式,这个字符串就是属性的名字: <script type="text/javascript"> var author = book.author; //得到book的"author"属性 var na

  • 浅谈JS正则表达式的RegExp对象和括号的使用

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

  • 浅谈JS封闭函数、闭包、内置对象

    浅谈JS封闭函数、闭包、内置对象

    一.变量作用域指的是变量的作用范围,javascript中的变量分为全局变量和局部变量 1.全局变量:在函数之外定义的变量,为整个页面公用,函数的内部外部都可以访问. 2.局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问.函数内部访问变量时,先在内部查找是否有此变量,如果有,就使用内部,如果没有,就去外部查找 二.封闭函数封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数. 1.一般函数的定义和执行函数 2.封闭函数的定义和执

  • 浅谈js控制li标签排序问题 js调用php函数的方法

    浅谈js控制li标签排序问题 js调用php函数的方法

    [Html代码] <span style="font-size:14px;"><ul class="list-group"> <? if ($categorys): ?> <? foreach ($categorys as $category):?> <li class="list-group-item" data-id="<? echo $category->id ?&

随机推荐