面试官：property和attribute的区别

在前端开发中，property（属性）和 attribute（属性/特性）是两个不同的概念，尽管它们在 HTML 和 JavaScript 中经常被混用，但它们的本质区别如下：

---

1. 定义

• Attribute（HTML 特性）

  • 是 HTML 标签上的原始值，用于初始化元素的状态。

  • 存在于 DOM 元素的 attribute 节点中，只能通过 getAttribute() / setAttribute() 访问和修改。

  • 字符串类型，即使是数值属性，HTML 特性存储的值也始终是字符串。

• Property（DOM 属性）

  • 是 DOM 对象的属性，它代表的是元素在 JavaScript 运行时的当前状态。

  • 可以直接通过 JavaScript 访问和修改（如 element.property = value）。

  • 数据类型多样，可以是 string、boolean、object 等，而不只是字符串。

---

2. 主要区别

对比项	Attribute（HTML 特性）	Property（DOM 属性）
存储位置	HTML 元素的特性（attributes）	JavaScript DOM 对象的属性（properties）
获取方式	element.getAttribute("attr")	element.propertyName
修改方式	element.setAttribute("attr", "value")	element.propertyName = value
数据类型	始终为 string	string 、boolean、object 等
是否同步	部分同步 （某些属性如 value 可能不同步）	仅反映 JavaScript 运行时状态

---

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？

使用场景	用 attribute	用 property
读取/修改 HTML 原始值	✅ getAttribute() / setAttribute()	❌
访问/修改元素当前状态	❌	✅ 直接 element.property
处理布尔型特性（如 checked, selected）	❌	✅
处理 class（类名）	❌	✅ element.classList.add()
处理 style（行内样式）	❌	✅ element.style.color = "red"

---

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。

最后：

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读