一文搞懂HTML 属性（Attributes）和 DOM 属性（Properties）

前端77

于 2024-08-15 12:32:58 发布

阅读量149

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/gaotlantis/article/details/141219281

版权

在 Web 开发中，HTML 属性（Attributes）和 DOM 属性（Properties）是两个相关但不同的概念。理解它们的区别对于操作和管理 HTML 元素非常重要。

HTML Attributes

HTML 属性是在 HTML 标签中定义的，用于初始化 DOM 元素的状态。它们在 HTML 文档加载时被解析，并且通常是字符串类型。

示例：

<input id="myInput" type="text" value="Hello">

在这个例子中，id、type 和 value 都是 HTML 属性。

DOM Properties

DOM 属性是 HTML 元素在浏览器内存中的表示。它们是 JavaScript 对象的属性，可以通过 JavaScript 动态地读取和修改。

示例：

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

console.log(input.value); // 输出: Hello

input.value = 'World';

console.log(input.value); // 输出: World

在这个例子中，value 是 DOM 属性，可以通过 JavaScript 进行读取和修改。

区别

初始化：HTML 属性用于初始化 DOM 属性。
类型：HTML 属性通常是字符串类型，而 DOM 属性可以是任何类型（字符串、对象、布尔值等）。
同步：在某些情况下，HTML 属性和 DOM 属性之间的值可能不同。例如，修改 DOM 属性不会影响对应的 HTML 属性。

示例

以下是一个更详细的示例，展示了 HTML 属性和 DOM 属性之间的区别：

<!DOCTYPE html>

<html>

<body>

<input id="myInput" type="text" value="Hello">

<script>

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

  // 获取 HTML 属性

  console.log(input.getAttribute('value')); // 输出: Hello

  // 获取 DOM 属性

  console.log(input.value); // 输出: Hello

  // 修改 DOM 属性

  input.value = 'World';

  // 获取修改后的 DOM 属性

  console.log(input.value); // 输出: World

  // 获取 HTML 属性（未改变）

  console.log(input.getAttribute('value')); // 输出: Hello

  // 修改 HTML 属性

  input.setAttribute('value', 'New Value');

  // 获取修改后的 HTML 属性

  console.log(input.getAttribute('value')); // 输出: New Value

  // 获取 DOM 属性（未改变）

  console.log(input.value); // 输出: World

</script>

</body>

</html>

总结

HTML 属性：用于初始化元素的状态，通常是字符串类型。
DOM 属性：表示元素在内存中的状态，可以是任何类型，并且可以通过 JavaScript 动态地读取和修改。

理解这两者的区别有助于更有效地操作和管理 HTML 元素。

原文：https://juejin.cn/post/7402863066172276751

前端77

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一文搞懂HTML 属性（Attributes）和 DOM 属性（Properties）

HTML 属性：用于初始化元素的状态，通常是字符串类型。DOM 属性：表示元素在内存中的状态，可以是任何类型，并且可以通过 JavaScript 动态地读取和修改。理解这两者的区别有助于更有效地操作和管理 HTML 元素。
复制链接

扫一扫