DOM property 和 attribute：深入浅出

DOM property 和 attribute 的区别详解

之前在阅读 Vue 的 API 时，在解释指令 v-bind 时，其中关于修饰符 .prop 的解释是：“作为一个 DOM property 绑定而不是作为 attribute 绑定”。令我挺好奇的，虽然干了这么久前端还未详细探究过两者之间的具体区别。于是就跟着链接进入了 Stack …

DOM property 和 attribute 的定义

DOM property 是 DOM 元素的内部属性，由 JavaScript 直接操作和控制。它们通常与元素的状态和行为相关，例如 element.value（表示输入元素的值）和 element.style（表示元素的样式）。

DOM attribute 则是元素的外部属性，主要用于元素的元数据，例如 element.id（表示元素的 ID）、element.class（表示元素的 class）和 element.href（表示链接的 URL）。

DOM property 和 attribute 的区别

DOM property 和 attribute 之间的主要区别如下：

• 访问方式： DOM property 可以通过 JavaScript 直接访问，而 attribute 必须通过 getAttribute() 和 setAttribute() 方法访问。
• 修改方式： DOM property 可以直接修改，而 attribute 必须通过 setAttribute() 方法修改。
• 作用范围： DOM property 只影响元素本身，而 attribute 可以通过 CSS 影响其他元素。
• 类型： DOM property 的类型受限于 JavaScript 的数据类型，而 attribute 可以是任何字符串。

DOM property 和 attribute 的使用场景

一般来说，DOM property 用于动态更新元素的状态和行为，而 attribute 用于元素的元数据。

例如，要设置一个输入元素的值，可以使用 DOM property element.value：

document.getElementById("input").value = "Hello world";

而要设置一个链接的 URL，可以使用 attribute element.href：

document.getElementById("link").href = "https://example.com";

.prop 修饰符

在 Vue.js 中，.prop 修饰符用于将一个属性绑定为 DOM property 而不是 attribute。这通常用于避免某些情况下 attribute 引起的意外行为，例如当绑定一个布尔值时。

例如，如果将一个布尔值 isVisible 绑定为一个元素的 visible attribute：

<div v-bind:visible="isVisible"></div>

当 isVisible 为 false 时，元素将被隐藏。然而，由于 attribute 不能接受布尔值，因此元素会呈现为 visible="false"。

使用 .prop 修饰符可以解决这个问题：

<div v-bind:visible.prop="isVisible"></div>

当 isVisible 为 false 时，元素将被隐藏，因为 visible property 将被设置为 false。

总结

DOM property 和 attribute 是 Web 开发中两种重要的概念。了解它们之间的区别对于有效地操作 DOM 至关重要。.prop 修饰符提供了一种在 Vue.js 中将属性绑定为 DOM property 的方法，这在某些情况下很有用。