Property vs Attribute：HTML元素中的兩種不同的屬性類型詳解

在HTML中，屬性(property)和特性(attribute)通常是一組有關元素的描述和規則，學習它們的不同點會有助於我們更好的理解和使用HTML。在本文中，我們將詳細解說這兩種不同屬性類型的區別和用法。

一、屬性(Property)是什麼？

屬性是指HTML標籤中元素對象的屬性值，可以通過JavaScript設置或獲取。例如：

<input type="text" name="username" id="username">

在上面的代碼中，type、name、id等都是input元素對象的屬性值，可以通過JavaScript進行操作。

在HTML中，屬性可以給元素附帶不同的屬性值，如：class、readonly、value等。可以使用以下形式來訪問它們：

//獲取屬性
element.getAttribute("attrName")
//設置屬性
element.setAttribute("attrName", "attrValue")

例如：

<input type="text" id="txtUsername">
<script>
    //設置屬性
    document.getElementById("txtUsername").setAttribute("value", "Tom");
    
    //獲取屬性
    var value = document.getElementById("txtUsername").getAttribute("value");
    alert(value); //輸出"Tom"
</script>

二、特性(Attribute)是什麼？

特性是HTML標籤中元素對象的特性，指的是元素在HTML中的表現形式。可以通過修改HTML文檔中的屬性來改變特性的值。在HTML里，特性值分為布爾型和非布爾型。

比如在以下代碼中，class和readonly就是特性：

<input type="text" class="form-control" readonly>

除此之外，在HTML中還有幾個默認的特性。例如：href、src等指向URL的特性，style用於設置CSS

三、Property vs Attribute的區別

1、屬性和特性是如何不同的？

屬性和特性的本質區別是一個是JavaScript的編程介面，另一個是HTML的文檔級別的描述。在更細緻的區分上，屬性是指HTML標籤中的元素屬性對象，而特性表示在HTML文檔中所聲明的元素的特徵，包括這個元素的命名空間URI等信息。

屬性是通過編程界面來進行設置和訪問的，而特性，作為HTML文檔的一部分，有時施加了一些語義規則內容，以確保文檔編寫的正確性。

2、Property和Attribute之間存在什麼聯繫？

在大多數情況下，屬性和特性是相同的，但是有時並不是這樣。例如：<input type="checkbox" checked>，在HTML中checked就是特性，但在JavaScript中則是屬性。所以，我們需要使用get/setAttribute()或property進行訪問。

3、屬性和特性操作應該如何選擇？

對於多數情況下，屬性和特性是相同的值，不同的是它們的設置方式。屬性是通過JS及DOM進行訪問和設置，而特性在HTML中聲明。所以在選擇時，需要了解操作屬性和特性的最佳途徑，以便於在不同情況下進行使用。

需要注意的是，在修改DOM元素的特性或屬性時，應該考慮到與文檔級屬性之間的差異。因為屬性是一種JavaScript對象的表現形式，而特性是文檔中HTML元素的表現形式。因此，在使用set/getAttribute時要注意屬性的正確性，不要給特性添加屬性，也不要給屬性添加特性（如將”checked”當做屬性而非特性）。正確的做法應該是使用property操作屬性，使用Attribute操作特性。

四、屬性和特性的代碼演示：

1、操作特性

<input type="text" id="txtUsername">
<script>
    //設置特性
    document.getElementById("txtUsername").readOnly = true;
    
    //獲取特性
    var readOnly = document.getElementById("txtUsername").readOnly;
    alert(readOnly); //輸出"true"
</script>

2、操作屬性

<input type="checkbox" id="chkBox" checked>
<script>
    //設置屬性
    document.getElementById("chkBox").checked = false;
    
    //獲取屬性
    var checkedValue = document.getElementById("chkBox").checked;
    alert(checkedValue); //輸出"false"
</script>

3、通過get/setAttribute操作特性

<input type="text" id="txtUsername">
<script>
    //設置特性
    document.getElementById("txtUsername").setAttribute("readonly", "readonly");
    
    //獲取特性
    var readOnlyAttr = document.getElementById("txtUsername").getAttribute("readonly");
    alert(readOnlyAttr); //輸出"readonly"
</script>

4、通過property操作屬性

<input type="checkbox" id="chkBox" checked>
<script>
    //設置屬性
    document.getElementById("chkBox").checked = false;
    
    //獲取屬性
    var checkedProp = document.getElementById("chkBox").checked;
    alert(checkedProp); //輸出"false"
</script>

總結：

本文詳細講解了屬性和特性的概念和區別，以及操作不同的最佳途徑。特別是我們需要注意的是，屬性和特性不是相互可替換的概念，但在某些情況下可能會相同。正確地操作屬性和特性是編寫可靠網頁的重要一步。