02.attribute特性和property属性区别

发表于 | 分类于

文章参考 JS中attribute和property的区别

首先，他们属于不同的范畴:

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

attribute和property介绍

  • 简单理解，Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等。(部分Attribute是Property)

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

有这么一段代码

1
<div id="div1" class="divClass" title="divTitle" title1="divTitle1"></div>
  • 常用的Attribute，例如id、class、title等，已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值
  • title1 不会被认为是Property的，它是Attribute。下面的取值方式是针对Property的，Attribute不能这样取值
1
console.log(in1.title1);       //undefined
  • HTML标签中定义的属性（包括自定义和默认的）和值会保存该DOM对象的attributes属性里面
  • attributes是属于property的一个子集，它保存了HTML标签上定义属性，有些常用特性（id、class、title等），会被转化为Property，这是说它是property的一个子集的原因

注意：

“class”变成Property之后叫做“className”，因为“class”是ECMA的关键字。

  • DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候再DOM对象上创建。如果在TAG对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。

attribute和property的取值和赋值

attribute取值

  • 《js高级程序设计》中提到，为了方便操作，建议大家用setAttribute()和getAttribute()来操作即可。（可以取得任何特性(不分attribute和property))，不管是标准的还是自定义的。）
1
2
3
4
5
6
<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");   //自定义特性

attribute赋值

  • 用setAttrbute()赋值，任何Attribute都可以，不分attribute和property
1
2
3
4
div1.setAttribute('class', 'a');
div1.setAttribute('title', 'b');
div1.setAttribute('title1', 'c');
div1.setAttribute('title2', 'd');
  • 最后注意，setAttribute()的两个参数，都必须是字符串。即对特性Attribute职能赋值字符串，而对属性Property就可以赋任何类型的值了。

property取值

  • 属性取值很简单。取任何属性的只，用“.”就可以：
1
2
3
4
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类型。

Property赋值

  • 赋值和基本的js对象属性赋值一样，用“.”即可：
1
2
3
4
div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];
  • 对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串！

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

1
2
3
4
in1.value='new value of prop';

console.log(in1.value);               // 'new value of prop'
console.log(in1.attributes.value);         // 'value="1"'
  • propety中的value也变成了新的值，但attributes却仍然是“1”。从这里可以推断，property和attribute的同名属性的值并不是双向绑定的。

如果反过来，设置attitudes中的值，效果会怎样呢？

1
2
3
in2.setAttribute('value','ni')
    console.log(in2.value);          //ni
    console.log(in2.attributes.value); //value='ni'

由此，可得出结论：

  1. property能够从attribute中得到同步；
  2. attribute不会同步property上的值；
  3. attribute和property之间的数据绑定是单向的，attribute->property；
  4. 更改property和attribute上的任意值，都会将更新反映到HTML页面中；

以上摘自链接的博客

个人总结如下：

  • 所谓property能够从attribute中得到同步，前提是attribute能够成为property，否则property通过点访问法访问不到
  • 而attribute不会同步property上的值（就是通过点访问法设置的值，不会更新到attribute上），个人觉得原因是attribute都保存到一个单独的对象，和包装property的对象是不同的，地址不同，怎么影响？

自己的测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<input id="in2" class="divClass" title="divTitle" align="left" title1="divTitle1" value="110">

</body>
<script>
  var oin2=document.getElementById("in2");
  oin2.setAttribute('value','2222')
  console.log(oin2.value); //2222        
  console.log(oin2.attributes.value);//2222

  oin2.value="33333"
  console.log(oin2.value); //33333         
  console.log(oin2.attributes.value); //2222
</script>

test