jQuery：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

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 elatched.中第一個元素的property，或是為每個選定的元素添加一個至多個property

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

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

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

先說attribute

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

節點的屬性值，我們指的是中的src的值

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery：attr()與prop()的差別" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.getAttribute(&#39;src&#39;));
    </script>

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

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery：attr()與prop()的差別" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.setAttribute(&#39;src&#39;, &#39;another.jpg&#39;);
    </script>

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

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

再說property

property是DOM元素的特性，和平常使用物件的方法相同，可以透過物件.特性取得物件的特性值，也可以透過物件.特性=特性值的方法來設定物件的特性值。

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery：attr()與prop()的差別" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.src);
    </script>

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

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

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery：attr()與prop()的差別" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
    </script>

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

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery：attr()與prop()的差別" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
        console.log(img.getAttribute(&#39;src&#39;));
    </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()，另外的參數可以參考下面這張表。