深入理解JS中attribute和property的区别

property（属性）和attribute（特性）在概念上极易混淆，其中文译名也极为相似，但二者实际上属于完全不同的范畴，存在本质区别。

• property指的是DOM节点在JavaScript中作为对象所具备的属性，它是JS层面的对象属性。
• attribute指的是HTML标签上定义的特性，其值严格限制为字符串类型。

attribute和property介绍

从直观角度理解，Attribute是DOM节点自带的固有属性，例如HTML中常见的id、class、title、align等。

而Property则是该DOM元素作为JS对象时附加的内容，例如childNodes、firstChild等内部结构属性。

参考以下代码示例：

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

var in1=document.getElementById("div1");
console.log(in1);

对于id为div1的div元素，其property内容如下（部分展示）：

观察发现存在一个名为“attributes”的属性，类型为NamedNodeMap，同时包含“id”、“className”、“title”等基本属性，但不存在名为“titles”的自定义属性。

 console.log(in1.id);          //div1
    console.log(in1.className);        //divClass
    console.log(in1.title);          //divTitle
    console.log(in1.title1);       //undefined

由此可见，HTML标签中的“id”、“className”和“title”会在JS对象in1上直接创建对应的property，而自定义属性“titles”则不会直接生成。这是因为每个DOM对象在初始化时仅创建默认的基本属性，用户在TAG标签中自定义的属性不会直接映射为DOM对象的property。

那么自定义的“title1”去了哪里？在attributes属性中可以查看到如下内容：

“title1”被存储在attributes对象中，该对象按顺序记录了在TAG中定义的所有属性及其数量。

这表明attributes属于property的一个子集，专门保存HTML标签上定义的属性。若进一步探究attributes中的每个成员，会发现它们并非简单的键值对，而是Attr类型的对象，拥有NodeType、NodeName等属性。这一点将在后续探讨。需要注意的是，直接打印attribute属性不会直接返回对象值，而是获取一个包含属性名和值的字符串，例如：

console.log(in1.attibutes.title1);        // divTitle1

由此可以得出以下结论：

• HTML标签中定义的属性和值会保存在该DOM对象的attributes属性中；
• 这些attribute在JavaScript中的类型是Attr，其结构比单纯保存属性名和值更为复杂；

再参考以下代码：

<input id="in_2">

在其property中可以看到如下部分：

尽管我们在TAG中没有显式定义“value”，但由于它是DOM默认的基本属性，在DOM初始化时依然会被自动创建。

“脚踏两只船”

常用的Attribute（如id、class、title等）已被作为Property附加到DOM对象上，可以像普通Property一样进行取值和赋值。然而，自定义的Attribute则不具备这种特殊待遇，例如：

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

该div内部的“title1”不会转化为Property。

即，凡是HTML代码中出现的属性均为Attribute。其中部分常用特性（如id、class、title）会被转化为Property，形象地说，这些特性/属性是“脚踏两只船”的。

最后需注意：“class”转化为Property后更名为“className”，因为“class”是ECMA的关键字。

• DOM拥有默认的基本属性，即所谓的“property”，无论何种情况，它们都会在初始化时创建到DOM对象上。
• 如果在TAG中对这些属性进行赋值，这些值将作为初始值赋给DOM中同名的property。

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");   //自定义特性

getAttribute()可以获取任何特性，无论是标准特性还是自定义特性。

然而，该方法的浏览器兼容性存在差异，部分浏览器可能会返回Property的值而非Attribute的值。因此，jQuery会进行测试，以确认getAttribute()是否绝对获取特性Attribute的值。

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

如果上述代码测试成立，说明getAttribute()方法存在缺陷，将不再被使用。

2、attribute赋值

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

使用setAttribute()进行赋值，适用于任何Attribute，包括自定义属性。且赋值的Attribute会立即反映在DOM元素上。

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

最后注意，setAttribute()的两个参数必须均为字符串。即对特性Attribute只能赋值字符串，而对属性Property则可以赋任意类型的值。

3、property取值

属性取值非常简单，获取任何属性的值，使用“.”即可：

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

此处再次强调：

• class特性在转化为属性时，名称改为“className”，因此div1.className与div1.getAttribute('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的赋值在IE浏览器中可能会引起循环引用，导致内存泄漏。为防止此问题，jQuery.data()进行了特殊处理，实现了数据与DOM对象的解耦。

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

in1.value='new value of prop';

console.log(in1.value);               // 'new value of prop'
console.log(in1.attributes.value);         // 'value="1"'

此时，页面中的输入栏值变为“new value of prop”，property中的value也更新为新值，但attributes中的值仍为“1”。由此推断，property和attribute的同名属性值并非双向绑定。

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

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

由此，可得出结论：

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

到此这篇关于深入理解JS中attribute和property的区别 的文章就介绍到这了,更多相关JS attribute property内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！