特性和属性（Attributes and Properties）

在HTML和DOM中，"特性"（attributes）和"属性"（properties）是两个相关但不同的概念，初学者经常容易混淆它们。

特性（Attributes）

• 定义：特性是HTML标记中写在元素标签内的部分
• 位置：存在于HTML源代码中
• 示例：<input id="username" type="text" value="John"> 中的 id、type 和 value 都是特性
• 访问方式：
  • element.getAttribute(name) - 获取特性值
  • element.setAttribute(name, value) - 设置特性值
  • element.hasAttribute(name) - 检查是否存在特性
  • element.removeAttribute(name) - 删除特性

属性（Properties）

• 定义：属性是DOM对象（JavaScript中的元素节点）上的值
• 位置：存在于DOM对象中
• 示例：document.getElementById('username').value 访问的是属性
• 特点：
  • 属性通常是特性的反映（但不总是）
  • 属性值通常是JavaScript适当类型的值（布尔值、数字等，而非字符串）

主要区别

1. 类型不同：

   • 特性值总是字符串
   • 属性值可以是任何JavaScript类型（布尔值、数字、对象等）

2. 命名差异：

   • 特性名不区分大小写（HTML不区分大小写）
   • 属性名区分大小写（JavaScript区分大小写）

3. 同步行为：

   • 对于标准特性/属性，改变一个通常会更新另一个
   • 对于非标准特性，不会自动同步

常见示例

<input id="age" type="number" value="30" disabled custom-attr="hello">

const input = document.getElementById('age');

// 特性访问
console.log(input.getAttribute('value')); // "30" (字符串)
console.log(input.getAttribute('disabled')); // "" (空字符串表示存在)
console.log(input.getAttribute('custom-attr')); // "hello"

// 属性访问
console.log(input.value); // 30 (数字)
console.log(input.disabled); // true (布尔值)
console.log(input.customAttr); // undefined (非标准特性不作为属性存在)

// 修改属性会影响特性（对于标准属性）
input.value = 35;
console.log(input.getAttribute('value')); // "35" (同步更新)

// 但修改特性不总是影响属性
input.setAttribute('value', '40');
console.log(input.value); // 35 (未改变，因为用户可能已经修改过)

最佳实践

1. 优先使用属性：对于标准属性，通常应该使用属性访问，因为它们提供了适当类型的值
2. **自定义数据使用data-***：对于自定义数据，使用 data-* 特性，可以通过 dataset 属性访问
3. 布尔特性：如 disabled, checked 等，在HTML中只要存在就为true（无论值是什么），但在DOM属性中是布尔值

特殊案例

• 类名：

  • 特性：class (字符串)
  • 属性：className (历史原因) 和 classList (现代API)

• 样式：

  • 特性：style (字符串，如 "color: red; font-size: 16px;")
  • 属性：style (CSSStyleDeclaration对象)

理解特性和属性的区别对于有效操作DOM非常重要，特别是在处理表单元素、自定义数据和动态内容时。