前端中property和attribute 的区别

君哥阅读：2509 1年前评论：2

在前端开发中，property和attribute都与 HTML 元素的特征和状态有关，但它们之间也存在一些区别：
定义和概念
property（属性）：是指 DOM（文档对象模型）节点对象的属性，它是 JavaScript 中对象的属性，用于在 JavaScript 中操作和访问 DOM 节点的各种特性和状态，与具体的 HTML 标签和特性没有直接的一一对应关系。
attribute（特性）：是指 HTML 标签本身所具有的特性，直接在 HTML 标记中定义，用于描述标签的各种特征和行为，如id、class、src、href等。
访问和修改方式
property：可以通过 JavaScript 直接访问和修改 DOM 节点的property属性。例如，对于一个<input>元素，可以通过inputElement.value来访问和修改输入框的值。
attribute：可以使用getAttribute()和setAttribute()方法来访问和修改attribute特性。例如，要获取一个元素的id特性，可以使用element.getAttribute('id')；要设置一个元素的class特性，可以使用element.setAttribute('class', 'new-class')。
数据类型和取值
property：property的值可以是各种数据类型，如字符串、数字、布尔值、对象等，具体取决于属性的用途和定义。例如，inputElement.value的值通常是字符串，而inputElement.disabled的值是布尔值。
attribute：attribute的值通常是字符串类型，即使在 HTML 中看起来像数字或其他类型，在获取时也会被解析为字符串。例如，<input type="number" value="123">中的value特性，通过getAttribute('value')获取到的是字符串"123"。
动态性和实时性
property：property的变化会实时反映在 DOM 节点的状态上，并且会触发相应的事件和更新。例如，当修改inputElement.value的值时，输入框中的内容会立即更新。
attribute：修改attribute特性不会直接导致 DOM 节点的状态变化，需要通过其他方式来触发相应的更新。例如，修改了<img>元素的src特性后，需要浏览器重新加载图片才能显示新的图像。

标签:replace trim JavaScript vuex