深入理解JS中attribute和property的区别

2023年6月10日下午4:48 • JavaScript

当我们在使用JavaScript处理HTML时，常常涉及到元素的属性（Attribute）和属性值（property）。在一些情况下，这两者的方式使用会存在一些细微的区别。下面，我将为您详细讲解“深入理解JS中attribute和property的区别”的完整攻略。

Attribute和Property的定义

首先，我们需要明确attribute和property的定义。

attribute：HTML元素在文档中的标记属性，一般以HTML代码的形式出现。
property：HTML元素的JavaScript DOM属性，需要通过访问DOM对象才能获取和设置。

需要注意的是，attribute是在HTML中进行定义和赋值的，而property则是在JavaScript中通过DOM进行获取和修改的。

Attribute和Property之间的区别

下面我们就来看看attribute和property之间的几点区别。

区别一：获取属性值的方式不同

attribute值可以通过getAttribute()方法来获取，而property则可以直接访问。

例如，获取div元素的title属性的值，可以使用以下代码：

<div id="myDiv" title="Div Element"></div>

// 获取元素的属性值
const myDiv = document.getElementById('myDiv');
console.log(myDiv.getAttribute('title')); // "Div Element"
console.log(myDiv.title); // "Div Element"

区别二：赋值方式不同

attribute的值可以通过setAttribute()方法来设置，而property则不能直接赋值，需要通过DOM去属性进行赋值。

例如，设置div元素的title属性的值，可以使用以下代码：

<div id="myDiv" title=""></div>

// 设置元素的属性值
const myDiv = document.getElementById('myDiv');

// 只能通过setAttribute()方法来设置attribute的值
myDiv.setAttribute('title', 'New Title');

// 通过DOM属性来设置property的值
myDiv.title = 'New Title';

区别三：属性值的类型不同

attribute的值是字符串类型，而property的值的类型却不仅仅是字符串类型。

例如，div元素的checked属性，在HTML中可以设置为true或false，但是在JavaScript中则是Boolean类型。

<input type="checkbox" id="myCheckbox" checked="checked">

// 获取checkbox元素的checked属性值
const myCheckbox = document.getElementById('myCheckbox');
console.log(typeof myCheckbox.checked); // "boolean"

区别四：attribute和property值可能不同步

当您更新attribute的值时，可能不会立即反映到property上。在某些情况下，property的值可能更改，而attribute的值却没有变化。

例如，修改input元素的value属性的值。

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

// 修改input元素的value属性的值
const myInput = document.getElementById('myInput');
myInput.setAttribute('value', 'New Value');
console.log(myInput.value); // "Hello World"

可以看到，尽管已经更新了attribute的值，但是property的值却没有更新。这是因为property的值仅在初始加载后更新，而不是在运行时。

另外一种情况是，如果您修改property的值，则不会反映到attribute上。

例如，修改input元素的value属性的值。

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

// 修改input元素的value属性的值
const myInput = document.getElementById('myInput');
myInput.value = 'New Value';
console.log(myInput.getAttribute('value')); // "Hello World"

由于property和attribute之间可能存在不同步的情况，因此在访问元素的属性时需要注意。