JavaScript 中 attribute 和 property 的区别是什么？

在 JavaScript 中，attribute 和 property 是用于访问和操作 HTML 元素的两种不同方式。

区别：

1. Attribute（属性）：

   • attribute 是指 HTML 元素上的标记属性，以字符串形式存在于 HTML 中。
   • 通过 getAttribute() 和 setAttribute() 方法可以读取和设置 HTML 元素的属性值。
   • getAttribute() 可以获取 HTML 元素的初始值，不受 JavaScript 改变而改变。

2. Property（属性）：

   • property 是指 JavaScript 对象中表示 HTML 元素的属性，以对象形式存在于 DOM 元素上。
   • 通过直接访问 JavaScript 对象的属性来读取和设置 HTML 元素的属性值。
   • property 反映了当前 HTML 元素的状态，会随着 JavaScript 对象的改变而改变。

示例：

<!-- HTML 元素 -->
<input type="text" id="myInput" value="Hello" />

<script>
  const input = document.getElementById('myInput');

  // 通过 attribute 获取 value 属性
  const attributeValue = input.getAttribute('value'); // "Hello"

  // 通过 property 获取 value 属性
  const propertyValue = input.value; // "Hello"

  // 改变 value 属性
  input.setAttribute('value', 'World');
  console.log(input.getAttribute('value')); // "Hello"（attribute 不变）
  console.log(input.value); // "World"（property 改变）
</script>

总的来说，attribute 是 HTML 元素上的原始标记属性，而 property 是 JavaScript 对象上的属性，property 反映了当前 HTML 元素的状态，可以被 JavaScript 直接操作和改变。