DOM中 property 和 attribute 详解

被问到 property 和 attribute 的区别,想来也是要好好看一下。

一、基本概念区别

其实Attribute和Property这两个单词,翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”,以示区别。从而我们也可以顾名思义

特性vs属性(当然平时也可以简单的说两者都是属性),可以这样认为:

Attribute

是HTML标签上的某个属性(特性),如‘type’,‘id‘,‘value‘,‘class‘以及自定义属性,它的值只能是字符串。

Property

javascript获取到的DOM节点对象,比如a 你可以将他看作为一个基本的js对象,这个节点对象包括很多属性((property),比如“value”,“className”)

以及一些方法,setAttribute,getAttribute,onclick等

还是太生涩了?看个input的例子

<input type="text" name="age" class="age" id="age" value="17" myAttr="myAttr">

可以看到,attributes只是properties这个大货色中的某个属性,其余property也是这样(和attributes同级)

再来看看attributes这货长什么样?

ok那我们可以直接这样玩了

也许是因为class是js的保留字,不能直接age.class吧,用className代替这几种方式分别获取了attribute和property

但是我们的自定义属性,就有不同了

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

attribute的获取设置修改一般使用 setAttribute()和getAttribute()  比较方便

而property 则使用  打点符. 或 [] 的方式获取即可

二、一些息息相关又有差异的东东

1. value的差异

默认情况下是17

手动或直接代码更改value为15后(可以看出输入框value的变化只会引起property方面的变化)

那主动权换为attribute呢?

2. name , id, class (互相影响)

同样的,让attribute来主动

class的操作

3.上面都是在原有属性改来改去,那增添新的属性会怎样呢?

abc,cba是可以认为是一个非默认属性吧,title,align 是,看下结果慢慢领会

把主动权交给attribute

所以一般对于默认的自有属性而言,property和attribute的影响是双向的

事实上value这东西真的很... 假设我最初没有value,会发生什么呢?

<input type="text" name="age" class="age" id="age" myAttr="myAttr">

所以啊,这是个特例,要想attribute的value也能得到变化,还非得特地去setAttribute()才行

4.对于形如 hidden:true的属性

高能预警:看这个东西会死很多脑细胞..(我的建议是跳过这段吧)

可以发现,若初始

假如我一开始input就设置了hidden呢?

<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden>

是不是很绕啊~~~~~~

那假如我一开始就给hidden来个属性呢,比如 no_hidden?(这样输入框也是会直接隐藏的)

<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden="no_hidden">

我们来看看操作

还有一种情况额,假如我设置为 hidden=true呢

<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden=true>

基本没其他情况了吧,总结一下? 好难总结,还是算了..

5. style属性

<input type="text" name="age" class="age" id="age" myAttr="myAttr" style="width:50%;height:30px;">

对于这其中的style Attribute和property的返回有什么不同呢? Attribute照常是字符串,而property则是个对象

6. onclick属性

<input type="text" name="age" class="age" id="age" myAttr="myAttr" onclick="function(){}">

Attribute可以正确获取到,而property方式就只能作为事件处理机制(所以会报错),也许也可以将其归入自定义属性的行列

7. src 或 href 这些有链接形式的属性

<img src="./1.jpg" id="img">

获取的时候,Attribute会直接使用表面上的属性(相对路径),property则会使用实际的绝对路径(设置的时候可以用相对)

三、来个小小的总结

1.没有非常明确的区别,只是有某些规律可遵循

2.attributes是和每个Property是在同一父级(可以这样认为吧)的,而每个Attribute的父级就是attributes

3. Attribute可以理解为特性(就是说可以有自定义的属性),property可以理解为属性(即html最基本提供的属性)

4.一般来说,无论开始还是任何时候,Attribute的变化会引起Property的变化, 而property的变化也会同步给Attribute进行变化(value除外)

5.有一些特殊的属性,要特殊对待

6.为了统一,最好直接使用 setAttribute()和getAttribute() ,IE8以上都支持了,不过IE6/7不支持的话,

比如obj.setAttribute("style","z-index:999;cursor:pointer")不支持,

那就退化成obj.style.cssText="z-index:999;cursor:pointer";

7.jq提供的 attr()和prop()方法, 其实就是基于 Attribute和property原生的使用方式

时间: 2024-10-05 05:31:16

DOM中 property 和 attribute 详解的相关文章

DOM 中 Property 和 Attribute 的区别

原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property是DOM中的属性,是JavaScript里的对象: attribute是HTML标签上的特性,它的值只能够是字符串: 基于JavaScript分析property 和 attribute html中有这样一段代码: <input

Objective-C中@property的所有属性详解

1,assign : 简单赋值,不更改索引计数 假设你用malloc分配了一块内存,并且把它的地址赋值给了指针a,后来你希望指针b也共享这块内存,于是你又把a赋值给(assign)了b.此时a 和b指向同一块内存,请问当a不再需要这块内存,能否直接释放它?结果是否定的,因为a并不知道b是否还在使用这块内存,如果a释放了,那么b在使用这块内存的时候会引起程序crash掉 应用场合: 对基础数据类型 (例如NSInteger,CGFloat)和C数据类型(int, float, double, ch

iOS中UIWebView的使用详解

iOS中UIWebView的使用详解 一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用的一种方式,通过一个网页URL来进行加载,这个URL可以是远程的也可以是本地的,例如我加载百度的主页:     UIWebView * view = [[UIWebView al

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

Java NIO中的Glob模式详解

Java NIO中的Glob模式详解 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.什么是Glob? 在编程设计中,Glob是一种模式,它使用通配符来指定文件名.例如:.java就是一个简单的Glob,它指定了所有扩展名为"java"的文件.Glob模式中广泛使用了两个通配符""和"?".其中星号表示"任意的字符或字符组成字符串",而问号则表示"任意单个字符&quo

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

Python中的getattr()函数详解:

Python中的getattr()函数详解: getattr(object, name[, default]) -> value Get a named attribute from an object; getattr(x, 'y') is equivalent to x.y. When a default argument is given, it is returned when the attribute doesn't exist; without it, an exception i

图像处理中的数学原理详解17——卷积定理及其证明

欢迎关注我的博客专栏"图像处理中的数学原理详解" 全文目录请见 图像处理中的数学原理详解(总纲) http://blog.csdn.net/baimafujinji/article/details/48467225 图像处理中的数学原理详解(已发布的部分链接整理) http://blog.csdn.net/baimafujinji/article/details/48751037 1.4.5   卷积定理及其证明 卷积定理是傅立叶变换满足的一个重要性质.卷积定理指出,函数卷积的傅立叶变