js中Attribute和Property区别

js中Attribute和Property区别

一、JS中Property

属性，就像C#等高级语言可以.获取或者设置其值；

特点

1、其值可以为任意值

2、名字区分大小写。

3、当调用innerHTML时不会显示出来。

二、JS中Attribute

特性，每一个dom元素都有一个attributes属性来存放所有的attribute节点，通过getAttribute()和setAttribute()方法来进行获取和操作。

特点

1、只能为字符串

2、名字与大小写无关，因为HTML attribute是大小写无关的。

3、当调用innerHTML时会显示出来。

4、你可以通过调用 attributes 属性对它们进行遍历。

三、JS中Property和Attribute的共性

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

例如

<li id="li1" class="liClass" title="liTitle" title1="liTitle1">100</li>

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

即，只要是DOM标签中出现的属性（html代码），都是Attribute。然后有些常用特性（id、class、title等），会被转化为Property。

四、Attribute取值

用getAttribute()来操作即可。

 var id = li1.getAttribute("id");              
 var className1 = li1.getAttribute("class");
 var title = li1.getAttribute("title");
 var title1 = li1.getAttribute("title1");   //自定义特性

			

五、Attribute赋值

 li1.setAttribute('class', 'a');
 li1.setAttribute('title', 'b');
 li1.setAttribute('title1', 'c');
 li1.setAttribute('title2', 'd');

		

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

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

六、Property取值

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

 var id = li1.id;
 var className = li1.className;
 var childNodes = li1.childNodes;
 var attrs = li1.attributes;

			

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

七、Property赋值

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

li1.className = 'a';
li1.align = 'center';