返回

深入解析 JavaScript 中 attribute 和 property 的异同

前端

在JavaScript中，attribute和property经常被混淆，但它们是两个截然不同的概念。attribute是HTML标签上的特性，它的值只能够是字符串；而property是DOM中的属性，是JavaScript里的对象。

  • attribute

attribute是HTML标签上的特性，用于定义该标签的行为或外观。例如，<input>标签的type属性可以是"text", "password", "checkbox", "radio"等，用于指定输入框的类型。

  • property

property是DOM中的属性，是JavaScript里的对象。它表示HTML元素的某种状态或行为。例如，<input>标签的value属性表示输入框中的值，<div>标签的style属性表示该元素的样式。

二者的区别

  • 类型

attribute只能是字符串，而property可以是任何类型，包括字符串、数字、布尔值、对象等。

  • 作用域

attribute的作用域仅限于HTML元素本身，而property的作用域可以扩展到整个DOM树。例如，<input>标签的value属性只能在该输入框中使用，而<body>标签的style属性可以在整个页面中使用。

  • 访问方式

attribute可以通过HTML标签的getAttribute()和setAttribute()方法访问，而property可以通过JavaScript对象的点号运算符访问。例如，可以这样获取<input>标签的value属性：

const input = document.getElementById("myInput");
const value = input.value;

也可以这样设置<input>标签的value属性：

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

总结

attribute和property是JavaScript中两个不同的概念。attribute是HTML标签上的特性，只能是字符串，作用域仅限于HTML元素本身，可以通过HTML标签的getAttribute()和setAttribute()方法访问。property是DOM中的属性，可以是任何类型，作用域可以扩展到整个DOM树，可以通过JavaScript对象的点号运算符访问。