DOM中的properties和attributes

平时，properties 和 attributes 这两个单词经常会出现。我对这两个词也是傻傻分不清，平常都只是单纯地把这两个词都理解为 “ 属性 ”。可是今天在 jQuery 中，却看到了两个不同的方法，一个是 prop()，另一个是 attr() 。鉴于之前这两个词在我脑海里模糊的定义，我便开始我的探索之旅。

1. 词义理解

作为一个软件工程专业的学生，没想到看到的第一篇文章就是从软件工程的角度去解释这两个词的区别，个人挺赞同该文章中的解释。以下为原文章博主的观点：

在软件工程的领域里，经常可以看到这两个词：atrribute和property，而且在中文中均可被翻译为“属性”，那么这两个词到底有什么区别呢。个人意见如下：

Property着重强调具有多少参数，或事物拥有的参数，不用它来特指某事物，只强调“有”。在软件工程中比如properties配置文件，系统环境变量，系统配置参数等。

Attribute 着重强调某个事物固有的属性，或区别于其他事物的特征，强调“专”。从宏观上讲，比方说Car类，是什么颜色（Color）；多大排量(Displacement)；什么品牌（Brand）等，通过这些特征，可以区分出它是一辆什么样的汽车。

Attribue和Property从本义上讲，Attribute可翻译为属性，特征；而Property可翻译为属性，资产。
在UML中Property更倾向于宏观的属性描述或属性的统指，Attribute则指具体的类的属性。

2. 从DOM的角度看

相信看了第一点之后，大家对这两个词的定义应该会变得清晰一些。现在我们回过头来，看一看两者在DOM中的区别。经过一番学习，我得出了以下的结论：

• property 和 attribute 是两个不同的概念，属于不同的范围；
• property 是DOM中的属性，是JavaScript里的对象；
• attribute 是HTML标签上的特性，它的值只能够是字符串。

当在编写HTML源代码时，我们可以在HTML元素上定义属性。一旦浏览器解析此代码，将创建一个HTMLInputElement对象，该对象将包含数十个属性，如：childElementCount，childNodes，children，classList，className， clientHeight 等，此时说的这些对象属性即为properties。而我们在HTML标签上定义的属性，则为attributes。

下面我们来看一段代码

  
   /* HTML */ 

  

  /* Javascript */

  var myInput = document.getElementById('myInput');
  console.log(myInput.type)        // "text"
  console.log(myInput.value)       // "default"
  console.log(myInput.id)          // "myInput"
  console.log(myInput.data)        // "undefined"
  console.dir(myInput.attributes)    // 输出一个NamedNodeMap对象，其中包括了type, value, id ,data 四个属性

从上面的这些代码，我们可以知道，对于给定的 DOM 节点对象，properties 是该对象的属性，而 attributes 是该对象 attributes 属性中的元素。attributes是属于property的一个子集，它保存了HTML标签上定义属性。如果再进一步探索attitudes中的每一个属性，会发现它们并不是简单的对象，它是一个Attr类型的对象，拥有NodeType、NodeName等属性。还有一点需要注意的是，打印attribute属性不会直接得到对象的值，而是获取一个包含属性名和值的字符串。

  console.log(myInput.attributes.data);        // " data='mydata' "

另外，当为一个给定的 HTML 元素创建一个 DOM 节点时，该节点的许多 properties 会和与其具有想相同或相似名称的attributes存在关联，但这种关系并不是一对一的关系。例如：

上面这行代码对应的DOM节点拥有 id，type，value 这三个属性：

• 在id属性中， property 是 attribute的映射属性。获取property，则读取attribute，设置property，则写入attribute。id 是一个纯映射的 property 属性，它的值不会主动修改，也不会受到限制。

• 在type属性中，property 是 attribute的映射属性。获取property，则读取attribute，设置property，则写入attribute。但type不是一个纯映射的属性，因为它受限于已知值（例如，input 的有效 type）。例如，你编写了代码，然后调用 theInput.getAttribute（“type”）返回数据，结果返回的是 “ text ”，而不是 “ foo ” 。

• 相反，在value属性中， property 不映射到 attribute，而且 property 为 input 中输入的当前值 。当用户手动更改输入框的值是， value 的 property 将映射此更改。

下面我们再来看一段代码

  
   /* HTML */ 

   

  /* Javascript */

  var theInput = document.getElementById("the-input");
  console.log(theInput.value);     //  "Name:"
  
  // 1、在输入框中输入”John“
  console.log(theInput.value);                     //  "John"
  console.log(theInput.getAttribute('value'));     //  "Name:"
  console.log(theInput.defaultValue);              //  "Name:"

  // 2、修改attributes
  theInput.setAttribute('value','Tom');            // 输入框文本变为 "Tom"
  console.log(theInput.value);                     //  "Tom"  （ propertie 发生改变 ）

  //3、修改properties
  theInput.value = "Jack";                         //  输入框文本变为 "Jack"
  console.log(theInput.getAttribute('value'));     //  "Tom:"  （ attribute 不发生改变 ）

在value属性中，property映射输入框内的当前文本内容，而attribute包含HTML源代码中的value属性的初始文本内容。所以如果你想知道文本框内的内容，请访问property属性。但是，如果您想知道文本框的初始值是什么，请访问attribute属性。或者你可以使用defaultValue属性，这是value属性的最初的映射。

有一些 properties 可直接反映他们的attributes（如 rel，id ），但也有些是用稍微不同的名称直接映射（如 htmlFor 映射 for 属性，className 映射 class 属性），也有许多可以映射它们的属性，但受到修改限制（如 src，href，disabled，multiple）。

3. 总结

1. property 是DOM节点的属性，是JavaScript里的对象；
2. attribute 是HTML标签上的特性，表现为DOM节点的attributes属性，它的值只能够是字符串；
3. attribute 和 property之间的数据绑定是单向的，修改 attribute 会导致 property发生修改；
4. 更改property和attribute上的任意值，都会将更新反映到HTML页面中。

4. 参考资料

1. Properties and Attributes in HTML
2. DOM 中 Property 和 Attribute 的区别
3. Attribute和Property的区别