web前端疑问之属性与特性

本文只简单讲述属性与特性之间的差别与关系，并不讨论特性的3个操作函数，js的兼容性问题和特殊的特性:class,style，如果想要详细了解“特性与属性”的知识，可以看《JavaScript高级程序设计（第3版）》中第10章的10.1.3 Element类型，里面详细专业的解释了特性与属性，还有相关的兼容性问题。

本文的主要内容结构：

1. 什么是特性？什么是属性？

2.特性与属性的关系

1. 什么是特性？什么是属性？

用一个简单的例子来解释：

<div id='box'  title='this is a box'></div>

<script>

  var  box = document.getElementById('box');

         alert(box.id);    // box

         alert(box.title);   // this is a box

</script>

代码解释：

    html标签中，id,title就是特性；

   js中，box.id  , box.title 就是属性

2.特性与属性的关系

还是用一个简单的例子来解释：

<div id='box'  title='this is a box' aa=”aaaaa“></div>

<script>

  var  box = document.getElementById('box');

         alert(box.id);    // box

         alert(box.title);   // this is a box

         alert(box.aa);    // undefined

         alert(box.dir);   // ""

</script>

代码解释：

特性会以属性的形式添加到DOM对象中。DOM对象box有两个属性（不止两个）：id，title，这两个属性会与box的特性同名，而且属性的值就是特性的值。为什么说是2个属性而不是3个属性呢？因为特性有”自定义特性“和”非自定义特性“之分，简单来说， 一个人的纹身，首饰这些东西，就是”自定义特性“，因为这些东西不是与生俱来的，是你自己决定的；而头发，皮肤就是”非自定义特性“，因为这些是与生俱来的。而上述说的特性会以属性的形式添加到DOM对象 针对的是”非自定义特性“，如上述代码，属性box.id,box.title,box.dir，就是div中对应的特性id title和dir，虽然，代码中没有显式声明dir，但是dir是html元素”与生俱来“的特性，所以DOM对象box中会有dir这个属性，而由于没有声明dir的值，所以默认值为空。而虽然div中声明了aa这个特性，但这个特性是”自定义特性“，所以不会出现在DOM对象box中，所以box.aa为undefined；

同理，在DOM对象div上自定义属性的话，元素div上不会出现对应的特性！