扩展知识: 从 HTML 属性到 DOM 属性, 深入理解两者关系

HTML 属性和 DOM 属性之间存在着密切的关系，并且在 JavaScript DOM 编程中扮演着重要的角色。当浏览器加载 HTML 页面时，会根据文档的 DOM 节点生成相应的 DOM 对象。例如，下面的 HTML 代码包含一个 <input> 元素：

<input type="text" name="username">

浏览器会生成一个 HTMLInputElement 对象来表示这个 <input> 元素。该对象拥有许多属性，可以用于访问和修改元素的属性和行为。

DOM 属性

DOM 属性是 DOM 对象的属性，用于表示元素的属性和行为。DOM 属性的值可以是字符串、数字、布尔值或对象。

以下是几个常用的 DOM 属性：

• id：元素的 ID。
• className：元素的类名。
• innerHTML：元素的 HTML 内容。
• outerHTML：元素的 HTML 代码。
• value：元素的值。

HTML 属性

HTML 属性是 HTML 元素的属性，用于指定元素的外观和行为。HTML 属性的值可以是字符串、数字或布尔值。

以下是几个常用的 HTML 属性：

• type：元素的类型。
• name：元素的名称。
• value：元素的值。
• checked：元素是否被选中。
• disabled：元素是否被禁用。

HTML 属性和 DOM 属性之间的关系

HTML 属性和 DOM 属性之间存在着密切的关系。当浏览器加载 HTML 页面时，会将 HTML 属性转换为 DOM 属性。例如，上面的 <input> 元素的 type 属性的值为 "text"，浏览器会将这个值转换为 DOM 属性 type 的值。

DOM 属性的值可以通过 JavaScript 代码进行修改。例如，以下代码将 <input> 元素的 value 属性的值设置为 "John Doe"：

document.querySelector('input[name="username"]').value = "John Doe";

修改 DOM 属性的值也会修改 HTML 属性的值。例如，上面的代码会将 <input> 元素的 value HTML 属性的值也设置为 "John Doe"。

结论

HTML 属性和 DOM 属性之间存在着密切的关系。DOM 属性是 DOM 对象的属性，用于表示元素的属性和行为。HTML 属性是 HTML 元素的属性，用于指定元素的外观和行为。当浏览器加载 HTML 页面时，会将 HTML 属性转换为 DOM 属性。DOM 属性的值可以通过 JavaScript 代码进行修改，修改 DOM 属性的值也会修改 HTML 属性的值。