JS中attr和prop属性的区别以及优先选择示例介绍

JS中attr和prop属性的区别以及优先选择示例介绍:

在JavaScript中，使用attr和prop两个属性来操作HTML元素的属性(例如：元素的ID，name，checked等)。这两个属性的作用都是为了获取或设置HTML元素的属性，但它们之间还是有些不同的。

区别

1. An attr可以用来读取或设置HTML属性{@lang=html}

html
<input id="my-checkbox" type="checkbox" checked />

javascript
const myCheckbox = document.getElementById('my-checkbox');
console.log(myCheckbox.getAttribute('checked')); // "checked"
myCheckbox.setAttribute('checked', false);
console.log(myCheckbox.checked); // true

这里我们首先通过getElementById()方法获取元素节点，并使用getAttribute()方法来获取元素上的"checked"属性，然后再通过setAttribute()方法将该属性设置为false。最后，我们用checked属性读取结果。

1. A prop 可以用于读取或设置JavaScript对象属性{@lang=javascript}

javascript
const myCheckbox = document.getElementById('my-checkbox');
console.log(myCheckbox.checked); // true
myCheckbox.checked = false;
console.log(myCheckbox.getAttribute('checked')); // "checked"

在这种情况下，我们通过checked属性直接读取或设置input元素的状态，而不是通过getAttribute()和setAttribute()方法。

因此，一些重要的区别可以被总结为:

• An attr 用于读取或设置HTML特性，而不是元素的属性。
• A prop 用于读取或设置元素的属性，而不是HTML特性。

优先选择示例

当你需要读取或设置元素的属性时，应该始终优先选择使用prop属性。然而，在某些情况下（例如，自定义HTML5属性），您需要使用attr属性。

例如，看下面这个select元素:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel" selected>Opel</option>
  <option value="audi">Audi</option>
</select>

我们可以通过以下方式读取和设置该元素的属性:

const mySelect = document.querySelector('select');

console.log(mySelect.value); // "opel"
console.log(mySelect.getAttribute('value')); // "volvo"

mySelect.value = 'audi';
console.log(mySelect.value); // "audi"

mySelect.setAttribute('value', 'opel');
console.log(mySelect.value); // "opel"

从中我们发现，在这种情况下，使用prop属性可以更清晰和便捷地读取和设置元素的属性。

另一个例子是自定义data-*属性:

<div id="myDiv" data-my-property="my-value"></div>

const myDiv = document.getElementById('myDiv');

console.log(myDiv.dataset.myProperty); // "my-value"
console.log(myDiv.getAttribute('data-my-property')); // "my-value"

myDiv.dataset.myProperty = 'another-value';
console.log(myDiv.dataset.myProperty); // "another-value"

myDiv.setAttribute('data-my-property', 'new-value');
console.log(myDiv.dataset.myProperty); // "new-value"

在这种情况下，使用attr属性可以更好地操作自定义HTML5属性。

综上所述，一般情况下，你应该始终优先选择使用prop属性，因为它更快速、更直接、更清晰。但是在某些情况下，使用attr属性更合适，比如读取和设置自定义HTML5属性。