jQuery學習筆記（四）：attr()與prop()的區別

標籤：這一   other   strong   setattr   ever   png   學習   log   元素   

這一節針對attr()與prop()之間的區別進行學習。

先看看官方文檔是如何解釋兩者之間功能差異的：

attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
擷取匹配的元素集合中第一個元素的attribute，或者為每個選定的元素添加一個至多個attribute

prop()

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
擷取匹配的元素集合中第一個元素的property，或者為每個選定的元素添加一個至多個property

可以觀察到，兩者之間的功能是十分相近的，只是兩者操作的對象不同。

這樣，我們將問題縮小為attribute與property之間的區別。

attribute與propery都有屬性的意思，為了以示區分，我們約定命名attribute為屬性，命名property為特性

先說attribute

在javascript中有getAttribute()，專門用來擷取節點的屬性值。

節點的屬性值，我們指的是<img id=‘test‘ src=‘test.jpg‘>中的src的值

<img id=‘test‘ src=‘test.jpg‘>    <script type=‘text/javascript‘>        var image = document.getElementById(‘test‘);        console.log(image.getAttribute(‘src‘));    </script>

 

以及setAttribute(),設定節點的屬性值。

<img id=‘test‘ src=‘test.jpg‘>    <script type=‘text/javascript‘>        var image = document.getElementById(‘test‘);        image.setAttribute(‘src‘, ‘another.jpg‘);    </script>

可以看到，節點的屬性值發生了改變。通過setAttribute設定的屬性值改變的就是節點的屬性值。

attr()的功能便是結合javascript中的getAttribute()與setAttribut()，操作的對象是節點的屬性值。

再說property

property是DOM元素的特性，和平常使用對象的方法相同，可以通過對象.特性擷取對象的特性值，也可以通過對象.特性=特性值的方法來設定對象的特性值。

<img id=‘test‘ src=‘test.jpg‘>    <script type=‘text/javascript‘>        var image = document.getElementById(‘test‘);        console.log(image.src);    </script>

可以看到擷取了DOM元素的特性值。雖然與節點的屬性值內容所指相同，但是形式上還是有區別的。

再看看設定DOM元素特性值：

<img id=‘test‘ src=‘test.jpg‘>    <script type=‘text/javascript‘>        var image = document.getElementById(‘test‘);        image.src=‘another.jpg‘;    </script>

 

發現改變了DOM元素的特性值，節點元素的屬性值隨著發生了改變。再通過getAttribute()方法，看是否能擷取剛剛設定的特性值。

<img id=‘test‘ src=‘test.jpg‘>    <script type=‘text/javascript‘>        var image = document.getElementById(‘test‘);        image.src=‘another.jpg‘;        console.log(img.getAttribute(‘src‘));    </script>

證實改變DOM的特性值，元素的屬性值也同樣發生了改變。

 

難道說attribute與property是一樣的嗎？

其實不盡然，真實情況是attribute與property引用了相同的資料來源。

1. 於build-in屬性，attribute和property共用資料，attribute更改了會對property造成影響，反之亦然，但是兩者的自訂屬性是獨立的資料，即使name一樣，也互不影響，看起來是下面這張圖，但是IE6、7沒有作區分，依然共用自訂屬性資料。

2. 並不是所有的attribute與對應的property名字都一致。比如attribute中的class，在property中對應的名稱為className。

3. 對於值是true/false的property，類似於input的checked等，attribute取得值是HTML文檔裡面的值（checked），property是取得計算結果（true/false），property改變並不影響attribute字面量，但attribute改變會影響property計算。

4. 對於一些和路徑相關的屬性，兩者取得值也不盡相同，但是同樣attribute取得是字面量，property取得是計算後的完整路徑，就像上面例子中src的傳回值。

 

如何選擇

總體來說，對於內建屬性使用prop(),自訂屬性時使用attr()，另外的參數可以參照下面這張表。

 

jQuery學習筆記（四）：attr()與prop()的區別