如何理解 DOM 元素的 Attribute 与 Property

DOM 元素的 Attribute 和 Property 都用于描述和操作 HTML 元素的特性和状态，但它们之间有一些区别：

1. Attribute（属性）：

   • 属性是 HTML 元素在 HTML 代码中的初始状态。
   • 它们可以在 HTML 中声明，并可以被用来初始化元素的初始状态。
   • 属性的值通常是字符串，但也可以是其他数据类型。
   • 属性可以通过 element.getAttribute() 方法来获取，通过 element.setAttribute() 方法来设置。

2. Property（属性）：

   • 属性是 DOM 元素在 JavaScript 代码中的当前状态。
   • 它们反映了 DOM 元素在运行时的状态，并可以随时进行更改。
   • 属性的值通常是与特定属性关联的 JavaScript 对象或值。
   • 属性可以直接通过 JavaScript 元素对象的属性来获取和设置。

虽然有时候 Attribute 和 Property 的值是相同的，但并不总是如此。它们之间的区别在于它们所描述的状态的不同：Attribute 描述了元素的初始状态，而 Property 描述了元素的当前状态。

需要注意的是，更改 Property 的值通常会影响到对应的 Attribute，但改变 Attribute 的值并不会自动更新对应的 Property。如果你对 Attribute 进行更改，需要手动将更改的值同步到对应的 Property 上。

总结起来，Attribute 描述了 HTML 元素的初始状态，而 Property 描述了 DOM 元素在 JavaScript 运行时的当前状态。它们在描述和操作元素的特性和状态时，提供了不同的方式。