在前端開發(fā)中，property（屬性）和 attribute（屬性/特性）是兩個(gè)不同的概念，盡管它們?cè)?HTML 和 JavaScript 中經(jīng)常被混用，但它們的本質(zhì)區(qū)別如下：

1. 定義

(1) Attribute（HTML 特性）

• 是 HTML 標(biāo)簽上的原始值，用于初始化元素的狀態(tài)。
• 存在于 DOM 元素的 attribute 節(jié)點(diǎn)中，只能通過 getAttribute() / setAttribute() 訪問和修改。
• 字符串類型，即使是數(shù)值屬性，HTML 特性存儲(chǔ)的值也始終是字符串。

(2) Property（DOM 屬性）

• 是 DOM 對(duì)象的屬性，它代表的是元素在 JavaScript 運(yùn)行時(shí)的當(dāng)前狀態(tài)。
• 可以直接通過 JavaScript 訪問和修改（如 element.property = value）。
• 數(shù)據(jù)類型多樣，可以是 string、boolean、object 等，而不只是字符串。

2. 主要區(qū)別

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" （同步修改）

結(jié)論：

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

? 示例 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")); // ""

結(jié)論：

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

4. 什么時(shí)候使用 attribute，什么時(shí)候使用 property？

5. 面試官期望的標(biāo)準(zhǔn)回答

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

6. 總結(jié)

• Attribute（特性）：HTML 原始值，只能存儲(chǔ)字符串，不隨用戶操作變化。
• Property（屬性）：JavaScript 運(yùn)行時(shí)的 DOM 狀態(tài)，隨用戶操作變化，可存儲(chǔ)多種數(shù)據(jù)類型。

不是所有 attribute 都有對(duì)應(yīng)的 property，但大多數(shù) property 都有對(duì)應(yīng)的 attribute。