HTML中的attribute属性和JavaScript中的property属性的区别

一、基本概念区别

• attribute：是HTML标签上的某个属性，如id、class、value等以及自定义属性

  它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute；

• property：是js获取的DOM对象上的属性值，比如a，你可以将它看作为一个基本的js对象。

  这个节点包括很多property，比如value，className以及一些方法onclik等方法。

从上图中我们可以看出，一个js对象有很多property，该集合名字为properties，properties里面有其他property以及attributies，attributies里面有很多attribute。所以attributes其实是属于property的一个子集。

简单理解，Attribute就是DOM节点自带的属性，HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面；而Property是这个DOM元素作为对象其附加的内容，例如childNodes、firstChild等，且都是默认的基本属性，而在创建的时候，它只会创建这些基本属性，。

总结：

• 1. property和attributies都是properties的子集，而每个attribute是attributies的子集；
• 1. attribute可以理解为特性，可以自定义，直接在html标签上添加的和使用setAttribute添加的情况一致，即html标签添加的都是attribute属性， property则是使用xx.属性进行更改，通常来讲，更改互相影响（value除外）
• 1. 当添加新的非默认属性时，是不互通的；
• 1. 一些特殊属性，则需要特殊对待。

二、attribute和property的取值和赋值

1、attribute取值

《js高级程序设计》中提到，为了方便操作，建议大家用setAttribute()和getAttribute()来操作即可。

<div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div>
 
 var id = div1.getAttribute("id");              
 var className1 = div1.getAttribute("class");
 var title = div1.getAttribute("title");
 var title1 = div1.getAttribute("title1");   //自定义特性
复制代码

2、attribute赋值

 div1.setAttribute('class', 'a');
 div1.setAttribute('title', 'b');
 div1.setAttribute('title1', 'c');
 div1.setAttribute('title2', 'd');
复制代码

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

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

注意：在使用setAttribute的时候，该函数一定接收两个参数，setAttribute（attributeName,value）,无论value的值是什么类型都会编译为字符串类型。在html标签中添加属性，本质上是跟在标签里面写属性时一样的，所以属性值最终都会编译为字符串类型。

3、property取值

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

 var id = div1.id;
 var className = div1.className;
 var childNodes = div1.childNodes;
 var attrs = div1.attributes;
复制代码

此处再次强调：

• class特性在变成属性时，名字改成了“className”，因此div1.className和div1.getAttrbute('class')相同。
• 上面代码中的div1.attributes是取的attributes这一属性，取出来保存到attrs变量中，attrs就成了一个NamedNodeList类型的对象，里面存储了若干个Attr类型。

4、property赋值

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

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

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

更改property和attribute其中一个值，会出现什么结果

由此，可得出结论：

• property能够从attribute中得到同步；
• attribute也会同步property上的值；
• attribute和property之间的数据绑定是双向的；
• 更改property和attribute上的任意值，都会将更新反映到HTML页面中。

作者：月落梅影
链接：https://juejin.im/post/6844903966187192333
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。