JavaScript中property和attribute的区别详细介绍

JavaScript中property和attribute的区别详细介绍

在JavaScript中，property和attribute指的都是HTML元素的属性，但它们的含义和使用方式有所不同。

property

property是HTML元素的属性，是对象的一部分，可以通过JavaScript来操作。在JavaScript中，我们可以使用element.propertyName的形式来访问元素的property。

例如，要访问一个按钮元素的disabled属性，可以使用以下代码：

let button = document.querySelector('button');
button.disabled = true;

这里的disabled就是按钮元素的一个property，它是一个布尔类型的值，表示按钮是否被禁用。我们可以通过将disabled属性设置为true来禁用按钮。

attribute

attribute是HTML元素的特性，只能在HTML中定义和修改，可以在文本编辑器或代码中手动修改，但是在JavaScript中，我们不能像访问property那样直接访问和操作attribute。但是，我们可以通过使用一些方法来操作attribute。

例如，要获取一个按钮元素的data-id属性，可以使用以下代码：

let button = document.querySelector('button');
let dataId = button.getAttribute('data-id');

这里的data-id就是按钮元素的一个attribute，表示按钮的自定义数据id。我们需要使用getAttribute方法传入属性名称来获取attribute的值。

同样地，我们也可以通过setAttribute方法来修改元素的attribute。

例如，要修改一个按钮元素的data-id属性，可以使用以下代码：

let button = document.querySelector('button');
button.setAttribute('data-id', 'new-id');

这里的new-id就是我们要设置的新的属性值。

property与attribute的区别

1. property是对象的一部分，而attribute只是HTML元素的一个特性；

2. property代表的是元素在JavaScript中的状态，而attribute代表的是元素在HTML中设置的特性；

3. 在大多数情况下，property和attribute的值是相同的，但是在一些特殊的情况下，它们的值可能不一样，例如：input元素的value属性和value属性；

4. 我们可以通过JavaScript来操作和修改property，但是只能通过DOM方法来操作和修改attribute。

示例说明

示例一

<button data-id="123">Click me</button>

let button = document.querySelector('button');
// 获取button元素的data-id属性值
let dataId = button.getAttribute('data-id'); // 123

这里的data-id属性是一个新建的特性，通过getAttribute方法获取到该属性的属性值。

示例二

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

let myInput = document.querySelector('#myInput');
myInput.value = 'New value';

这里的value是input元素的一个property，表示input的当前值。我们通过JavaScript将该property设置为了'New value'。可见，属性值被修改了，而attribute值没有发生变化。