面试官：property 和 attribute 的区别

在前端开发中，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。