1.介绍:

上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单介绍一下我的理解。

其实Attribute和Property这两个单词,翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”,以示区别。

简单理解,Attribute就是dom节点自带的属性,例如html中常用的id、class、title、align等:

而Property是这个DOM元素作为对象,其附加的内容,例如childNodes、firstChild等:

2.“脚踏两只船”:

另外,常用的Attribute,例如id、class、title等,已经被作为Property附加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute,就不会有这样的特殊优待,例如:

<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>

这个div里面的“title1”就不会变成Property。

即,只要是DOM标签中出现的属性(html代码),都是Attribute。然后有些常用特性(id、class、title等),会被转化为Property。可以很形象的说,这些特性/属性,是“脚踏两只船”的。

最后注意:“class”变成Property之后叫做“className”,因为“class”是ECMA的关键字。以下代码等价:

1 var className = div1.className;
2 var className1 = div1.getAttribute("class");

3.取值与赋值:

3.1. Attribute取值:

上一篇博客http://www.cnblogs.com/wangfupeng1988/p/3626300.html已经提到,可以通过div1.Attributes获取所有的特性信息,div1.Attributes将返回一个NamedNodeList类数组,其中包含了若干个Attr类型的对象。《js高级程序设计》中提到,为了方便操作,建议大家用setAttribute()和getAttribute()来操作即可。

1 <div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div>
2
3 var id = div1.getAttribute("id");
4 var className1 = div1.getAttribute("class");
5 var title = div1.getAttribute("title");
6 var title1 = div1.getAttribute("title1"); //自定义特性

getAttribute()可以取得任何特性,不管是标准的还是自定义的。

但是这个方法的浏览器兼容性有问题,有些浏览器可能会获取属性Property的值,因此jQuery要做一个测试,看getAttribute()是否是绝对获取特性Attribute的值。

div1.className = 'a';
var judge = div1.getAttribute("className") === 'a';

如果以上代码成立,说明getAttribute()方法出现了问题,将不再使用。

3.2. Attribute赋值:

1 div1.setAttribute('class', 'a');
2 div1.setAttribute('title', 'b');
3 div1.setAttribute('title1', 'c');
4 div1.setAttribute('title2', 'd');

用setAttrbute()赋值,任何Attribute都可以,包括自定义的。而且,赋值的Attribute会立刻表现到DOM元素上。

如果是标准特性,也会更新它们关联的属性的值:

最后注意,setAttribute()的两个参数,都必须是字符串。即对特性Attribute职能赋值字符串,而对属性Property就可以赋任何类型的值了。

3.3. Property取值:

属性取值很简单。取任何属性的只,用“.”就可以:

1 var id = div1.id;
2 var className = div1.className;
3 var childNodes = div1.childNodes;
4 var attrs = div1.attributes;

此处再次强调:

第一,class特性在变成属性时,名字改成了“className”,因此div1.className和div1.getAttrbute('class')相同。

第二,上面代码中的div1.attributes是取的attributes这一属性,取出来保存到attrs变量中,attrs就成了一个NamedNodeList类型的对象,里面存储了若干个Attr类型。

3.4. Property赋值:

赋值和基本的js对象属性赋值一样,用“.”即可:

div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];

对属性Property可以赋任何类型的值,而对特性Attribute只能赋值字符串!

另外,对于属性Property的赋值在IE中可能会引起循环引用,内存泄漏。为了防止这个问题,jQuery.data()做了特殊处理,解耦了数据和DOM对象,有兴趣可以了解以下。这不是本文的重点,不做赘述。

4.style和onclick:

其实style和onclick与id、class、title一样,也是“脚踏两只船”,但是向id、class、title都是简单的字符串值,用“.”和getAttribute()获取结果一样。但是对于style和onclick这两者,就不一样了。

4.1. 用“.”获取Style:

<div id="div1" class="divClass" style="width:100%; padding:10px;">100</div>
console.log(div1.style);

以上代码中,返回了一个CSSStyleDeclaration对象,这个对象中包含着样式的所有信息:

4.2. 用getAttribute()获取style:

<div id="div1" class="divClass" style="width:100%; padding:10px;">100</div>

console.log(div1.getAttribute("style"));

以上代码返回的就是一个简单的字符串:“width:100%; padding:10px;”

4.3. 总结:

上面两个例子,用“.”获取的是style属性Property,我们可以给属性Property赋任何类型的值;而用getAttribute()获取的是特性Attribute,特性Attribute中只能存贮字符串。两者的数据结构不一致,导致返回的结果不一致。

到这里,我们就不需要再演示用“.”和getAttribute()获取onclick了,大家猜想就能得到答案。。。

5.总结:

本文简单介绍了DOM元素的特性(Attribute)和属性(Property),下面说一说重点条目:

  • 特性和属性两者的存储方式不同;
  • “2.脚踏两只船”要了解;
  • DOM属性可能会导致循环引用内存泄漏。

就写到这里吧,大家觉得有需要补充的,尽管提出意见!

DOM元素的Attribute(特性)和Property(属性) 【转载】的更多相关文章

  1. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  2. js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  3. 返本求源——DOM元素的特性与属性

    抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...

  4. DOM元素对象的属性和方法(1)

    一.accessKey() 作用:获取元素焦点快捷键:设置快捷键后,使用Alt+快捷键,让元素快速获得焦点, <!DOCTYPE html> <html> <head&g ...

  5. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  6. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  7. 上层建筑——DOM元素的特性与属性(dojo/dom-attr)

    上一篇返本求源中,我们从DOM基础的角度出发,总结了特性与属性的关系.本文中,我们来看看dojo框架是如何处理特性与属性的.dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与do ...

  8. Dom元素的Property和Attribute

    Attribute就是DOM节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这个DOM元素作为对象,其附加的内容,例如childNodes.fir ...

  9. 上层建筑——DOM元素的特性与属性(dojo/dom-prop)

    上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.val ...

随机推荐

  1. jQuery中常用的函数方法总结

    jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在开发中会比较常用的,仅供大家学习和参考. 事件处理 ready(fn) 代码: $(document).rea ...

  2. Oracle Global Finanicals Technical Reference(一)

    Skip Headers Oracle Global Finanicals Oracle Global Financials Technical Reference Manual Release 11 ...

  3. redis注册成window服务

    注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 开启服务 ...

  4. leetCode之旅(12)-反转二叉树

    背景描述 Homebrew 是 OS X 平台上的包管理工具.用其官网的话说就是: the missing package manager for OS X | OS X 平台遗失的包管理器. 相信在 ...

  5. ES6中Promise详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. Promise 提供统一的 AP ...

  6. mongodb3.6 (五)net 客户端访问mongodb设置超时时间踩过的“坑”

    前言 在上一篇文章中,我们有提到net访问mongodb连接超时默认为30秒,这个时间在实际项目中肯定是太长的.而MongoClientSettings 也确是提供了超时属性,如下图: 可实际使用中, ...

  7. 排序算法入门之冒泡排序及其优化(java实现)

    冒泡排序思想(从小到大): 比较相邻两个元素,如果第一个元素比第二个元素大,就交换他们的位置.第一趟,从第一个元素开始,第一个元素和第二个元素比较,如果第一个元素比第二个元素大,则交换位置:接下来比较 ...

  8. Eclipse 3.5 以后安装插件很慢的解决办法

    1 .除非你需要,否则不要选择"联接到所有更新站点" 在安装对话框里有一个小复选框,其标示为"在安装过程中联接到所有更新站点从而找到所需的软件."从表面上看,这 ...

  9. LOVO学习之思维导图和文档编辑器

    思维导图——是一种图示笔记方法,一种图示笔记工具,一个思考的利器.能将放射性思考具体化,帮助人们理解和记忆事物. 思维导图绘制规则:1,在纸的正中央用一个彩色图像或者符号开始画思维导图. 2,把所有主 ...

  10. Hazelcast3.2文档目录翻译

    整理google共享磁盘找到了2014年翻译的Hazelcast官方文档的目录,分享出来可能会对英语不好的同学有些帮助吧. The_Book_of_Hazelcast_r1.2-中文目录 The_Bo ...