撲朔迷離的屬性和特性【完全弄清】

從學習前端以來，屬性和特性已困惑我好久。今天使用jQuery時，又踩到了這個坑。因而下定決心，完全搞懂它。

1、對象、屬性和特性的關係

先來看一下詞典的解釋：

property：一、財產、全部權、房地產；二、性質、特性、屬性；
attribute：屬性、特質、特性、品質

好吧，除了財產、房地產（手動斜眼），好像不能把他倆區分開來。既然如此，我仍是從專業書籍中尋找答案吧。《JavaScript高級程序設計》第6章：

ECMA-262把對象定義爲： 「無序屬性的集合，其屬性能夠包含基本值、對象或者函數」。

「嗯...對象..的屬性..」
好像與對象有直接的聯繫！property不是財產嗎？那我僞裝property就是object的財產好了（手動滑稽）。
來個例子吧：

var person = {
    name: 「小明」,
    age: ‘26’,
    sayName: function(){
    alert(this.name);
    }
};

這裏，name和age都是person對象的屬性。

這些屬性在建立時都帶有一些特徵值（characteristic）， JavaScript 經過這些特徵值來定義它們的行爲。--《JavaScript高級程序設計》

簡單點說，屬性有特徵值，用來定義屬性的行爲。（注意啦，屬性和特性的一個關係出現了。）對於像name和age這樣的屬性，有4個特性描述它們的行爲，分別是[[Configurable]]、[[Enumerable]]、[[Writable]]、[[Value]]，這些特性描述了name和age屬性：
一、是否能夠從新定義
二、是否能夠用for-in循環返回屬性
三、是否能夠修改
好的，咱們到這裏先打住，咱們知道了，特性能夠用來描述屬性的行爲。

這裏，咱們本身建立的一個對象和DOM對象從直觀上來看，好像不太同樣。二者不太容易產生聯繫。那麼，讓咱們把目光聚焦到DOM（文檔對象模型）上吧，它但是如假包換的對象啊！

JavaScript 中的全部節點類型都繼承自 Node 類型，所以全部節點類型都共享着相同的基本 屬性和方法。(IE9如下除外)

nodetype屬性：代表節點的類型。值爲1表示節點是Element類型，2是Attr類型，3是Text類型，等等
nodeName屬性：節點名稱
nodeValue屬性：節點值
...
也就是說，咱們html中的div、ul、li等等都是node節點，而像id、class、type、title等是元素節點的特性，特性屬於Attr類型，而特性是元素attributes屬性的節點。

看起來很繞，咱們試着捋一捋，像div這樣的元素，它有attributes屬性，而id、class等是該屬性的節點，也就是說，id和class這樣的特性是用來描述attributes屬性的。與以前瞭解到的「特性用來描述屬性的行爲」並沒有出入。

到這裏，咱們小結一下。不管是person對象仍是DOM對象（好比div），它們都有本身的屬性（property），而屬性又有一個叫特性（attribute）的東西來定義它的行爲。好的，咱們弄明白這三者的關係了。

可是，咱們彷佛還有一些謎團沒有解開。下面，咱們一塊兒來看看屬性和特性是如何訪問的。

2、屬性和特性的訪問

要訪問對象的屬性，例如剛剛的person對象，咱們能夠用person.name來訪問person對象的name屬性；對於DOM對象<div id="box" class="red"></div>，爲了說清楚問題，咱們先獲取對象的引用：

var oBox = document.getElementById('box');
//咱們能夠經過oBox.tagName訪問tagName屬性和nodeType屬性
console.log(oBox.tagName);       //DIV
console.log(oBox.nodeType);      //1

但是，這很正常啊！問題出如今：

//咱們能夠經過oBox.id獲取對象的id值
 console.log(oBox.id);           //box
 console.log(oBox.className);    //red

可能咱們會以爲，這依然很正常啊！哪裏不對嗎？

是的，這裏不正常！由於id明明是oBox對象的attributes屬性中的節點，它又不是屬性，憑啥能夠用oBox.id來訪問？！但是咱們當初就是這麼學的呀，一開始就是這麼使用的啊~

崩潰後，咱們找到了答案，來自《JavaScript高級程序設計》：

全部HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element 並添加了一些屬性。添加的 這些屬性分別 對應於每一個HTML元素中都存在的下列標準 特性： id、className、title等

啊，恍然大悟！快哉~

之因此可以這麼訪問，原來是設計者的良苦用心啊，把id、class、title這樣的特性添加爲html element的屬性id、className、title，這麼訪問不就方便了嗎？

到這裏，迷霧已經散去。咱們漸漸看到了真相。

每一個元素都有一或多個特性，這些特性的用途是 給出相應元素或其內容的 附加信息。操做特性的
DOM 方法主要有三個，分別是 getAttribute()、 setAttribute()和 removeAttribute()。這三
個方法能夠針對任何特性使用，包括那些以 HTMLElement 類型屬性的形式定義的特性。

console.log(oBox.getAttribute("id"));    //box
console.log(oBox.getAttribute("class")); //red

這樣，咱們也明白了，爲何用getAttribute()訪問class時，不須要用className的緣由。

3、自定義特性和屬性

1.自定義特性

html：

<div id="box" left="left"></div>

js：

oBox.setAttribute('left','left');

不過，自定義的特性不能用屬性的方式來訪問，

console.log(oBox.left);                 //undefined
console.log(oBox.getAttribute('left')); //left

另外，HTML5規範中，自定義特性應該加上data-前綴，以便驗證。

2.自定義屬性

其實，咱們有用過「自定義」屬性，在設置定時器時，將timer綁定在元素上，不一樣的元素就有本身的定時器了。

oBox.timer = setTimeout(function(){
    //to do
},5000);

oBox2.timer = setTimeout(function(){
    //to do 2
},5000);

（完）