在前端開發中，property（屬性）和 attribute（屬性/特性）是兩個不同的概念，盡管它們在 HTML 和 JavaScript 中經常被混用，但它們的本質區別如下：

1. 定義

(1) Attribute（HTML 特性）

• 是 HTML 標簽上的原始值，用于初始化元素的狀態。
• 存在于 DOM 元素的 attribute 節點中，只能通過 getAttribute() / setAttribute() 訪問和修改。
• 字符串類型，即使是數值屬性，HTML 特性存儲的值也始終是字符串。

(2) Property（DOM 屬性）

• 是 DOM 對象的屬性，它代表的是元素在 JavaScript 運行時的當前狀態。
• 可以直接通過 JavaScript 訪問和修改（如 element.property = value）。
• 數據類型多樣，可以是 string、boolean、object 等，而不只是字符串。

2. 主要區別

3. 示例分析

? 示例 1：input.value vs input.getAttribute("value")

<input type="text" id="myInput" value="Hello">

const input = document.getElementById("myInput");

// 獲取 HTML 特性（初始值，不變）
console.log(input.getAttribute("value")); // "Hello"

// 獲取 DOM 屬性（可能變化）
console.log(input.value); // "Hello"

// 修改 DOM 屬性（用戶輸入后，value 變了）
input.value = "World";
console.log(input.value); // "World"

// 但 HTML 特性（attribute）還是原來的值
console.log(input.getAttribute("value")); // "Hello"

// 修改 HTML 特性
input.setAttribute("value", "New Value");
console.log(input.getAttribute("value")); // "New Value"
console.log(input.value); // "New Value" （同步修改）

結論：

• getAttribute("value") 讀取的是 HTML 初始值，不受用戶輸入影響。
• input.value 讀取的是 當前值，會隨著用戶輸入變化。

? 示例 2：checked（布爾屬性）

<input type="checkbox" id="myCheckbox" checked>

const checkbox = document.getElementById("myCheckbox");

// 讀取 HTML 特性（attribute）
console.log(checkbox.getAttribute("checked")); // ""

// 讀取 DOM 屬性（property）
console.log(checkbox.checked); // true

// 取消選中（修改 property）
checkbox.checked = false;
console.log(checkbox.checked); // false

// 但 HTML 特性仍然存在
console.log(checkbox.getAttribute("checked")); // ""

結論：

• getAttribute("checked") 讀取的是 HTML 原始特性，即使 checked=false 仍然返回 ""（存在即為 true）。
• checkbox.checked 讀取的是 當前選中狀態，隨用戶操作變化。

4. 什么時候使用 attribute，什么時候使用 property？

5. 面試官期望的標準回答

Attribute（特性）是 HTML 標簽的固有屬性，用于初始化 DOM，而 Property（屬性）是 JavaScript 運行時 DOM 元素的當前狀態。Attribute 只能存儲字符串值，而 Property 可存儲不同類型的數據。雖然某些屬性（如 id, href）在 HTML 和 DOM 之間同步，但其他屬性（如 value, checked）可能不會同步，因此要根據具體情況選擇合適的方法讀取或修改元素。

6. 總結

• Attribute（特性）：HTML 原始值，只能存儲字符串，不隨用戶操作變化。
• Property（屬性）：JavaScript 運行時的 DOM 狀態，隨用戶操作變化，可存儲多種數據類型。

不是所有 attribute 都有對應的 property，但大多數 property 都有對應的 attribute。