傻傻分也分不清楚的 property 和 attribute

在前端开发中，我们经常会听到 property 和 attribute 这两个词，但很多人却分不清它们的区别和作用。本文将详细介绍这两个概念，深入探讨它们之间的关系，并提供相关的示例代码和实践指导。

什么是 property？

在 JavaScript 中，property（属性）是一个对象内部存储数据或方法的变量。当我们访问这个对象时，可以使用点号或方括号语法来获取或设置这些属性的值。例如：

----- ------ - -
  ----- --------
  ---- ---
  ------------- -
    ------ ----------
  -
--

------------------------- -- -- -------
------------------------ -- -- --
---------------------------------- -- -- -------

在上面的例子中，name、age 和 getFullName 都是 person 对象的属性。它们被存储在该对象的内部，可以通过点号或方括号语法进行访问。

什么是 attribute？

与 property 不同的是，attribute（特性）是 HTML 元素的特殊属性。它们可以设置元素的默认值，或者在 JavaScript 中访问和修改它们的值。例如：

------ ----------- ------------ ------------- --------

在上面的例子中，type、id 和 value 都是 <input> 元素的 attribute。它们被存储在该元素的属性列表中，可以通过 JavaScript 访问和修改它们的值。

property 和 attribute 的关系

尽管它们看起来很相似，但 property 和 attribute 之间存在一些重要的区别。其中最显著的区别是：

Property 是 JavaScript 对象内部存储数据或方法的变量，而 attribute 是 HTML 元素的特殊属性。
在大多数情况下，property 的值可以直接修改，而 attribute 的值只能通过 JavaScript 来修改或获取。

在某些情况下，property 和 attribute 可以互相影响。例如，在设置一个元素的属性时，如果该属性对应的 property 已经存在，则会更新 property 的值，并且该值会反映在元素上。例如：

------ ------------------- ---- -------------
------ ----------- ------------ ---------

----- ----- - -----------------------------------

------------------------- -- -- --
----------------------------------------- -- -- --

----------- - --------

------------------------- -- -- -------
----------------------------------------- -- -- -------

在上面的例子中，我们首先获取了 myInput 元素，并使用 value property 将其值设置为空字符串。然后，我们使用 getAttribute() 方法获取 value 属性的值，并发现它的值为 ''。接下来，我们将 value property 的值设置为 'Alice'，并再次使用 getAttribute() 方法获取 value 属性的值。在这种情况下，我们会注意到 getAttribute('value') 返回的依然是空字符串 ''。

如何正确使用 property 和 attribute

虽然 property 和 attribute 之间有一些复杂的关系，但在实际编程中，您不需要过于担心它们的区别。通常情况下，您只需要根据您要执行的操作来使用它们即可。以下是一些实践指导：

1. 获取元素属性值

如果您需要获取一个 HTML 元素的属性值，则应该使用 getAttribute() 方法。例如：

------ ----------- ------------ ------------- --------

----- ----- - -----------------------------------
-----

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------