JavaScript中的Attribute和Property区别和联系

前端的童鞋应该都听过这两个概念，Attribute和Property，不过很多人应该都只是有一个模糊的概念，其中当然包括我，于是我去查找了一些相关的资料，在这里总结一下：

JavaScript为了方便操作DOM，在JavaScript中定义了一个对象类型：DOMElement。对象上有很多的属性，而这些属性就是所谓的property，在这些属性中有一个参数叫做attrbutes。

看一个例子：

<input name="inputName" id="inputId" custom="custom" data-aaa="aaa" value="inputValue" />

console.log([input]);

从打印结果可以看到attrbutes包含了所有写在html上的属性，在property上也有很多包含在attributes中的属性，比如name, id等等。
property是指的javascript对象，attribute是html的原始属性，是作为property的一个属性存在，property对象上也包含很多attribute中的属性。

我们再对这些属性做一个具体的分析：

console.log(input.id, input.getAttribute('id')); // inputId inputId
console.log(input.value, input.getAttribute('value')); // inputValue inputValue
console.log(input['data-aaa'], input.getAttribute('data-aaa')); // undefined aaa
console.log(input.custom, input.getAttribute('custom')); // undefined custom

很明显，property是包含了html自带的属性（例如：id, value, name, checked等等），不包括自定义的属性。刨根问底，刨个稀烂。既然我们已经清楚自定义的属性是没有存在于property中的，那我们再来刨一刨这些个自带的属性。以其中一个属性value为例来探究探究，通过修改property的属性、attribute的属性、手动修改输入框内的值来观察他们之间的联系。

话不多说，直接log、log、log。。。

<input id="inputId" value="initial" />

const input = document.querySelector('#inputId');

console.log(input.value, input.getAttribute('value')); // Initial Initial
// 设置property的值来观察变化
// 为了防止对后续修改的影响，在输出值后将其注释掉

// input.value = 'Property';
// console.log(input.value, input.getAttribute('value')); // Property Initial

// 设置attribute的值来观察变化
// 为了防止对后续修改影响，在输出值后将其注释掉
// input.setAttribute('value', 'Attribute');
// console.log(input.value, input.getAttribute('value')); // Attribute Attribute

// 当我们手动修改input框内的值为 Change
input.onchange = function() {
    console.log(input.value, input.getAttribute('value')); // Change Initial
}

不难发现：

• 在修改property之后attribute并未改变
• 修改attribute则发现attribute和property都发生了改变
• 手动修改input输入框的值时，也只是property发生了变化，并没有修改attribute的值

在MDN上也有相关的描述：

使用 setAttribute() 修改某些属性值时，尤其是 XUL 中的 value，可能得不到期望结果。这是由于 attribute 指定的是默认值。要访问或修改当前值，应该使用 property 属性。例如，使用 Element.value 代替 Element.setAttribute()。

---

基于上述“实验”总结一下：

• property属于DOM，是JavaScript的对象；attribute是html的自带属性，可以通过attributes属性或者getAttribute/setAttribute方法进行访问
• property的属性值也可以是任意类型，attribute的属性值类型只能是string
• property包含attribute中html自带的属性，不包含自定义属性
• attribute中的值更像是初始值，会同步到property中，attribute的值的修改也会同步到property中
• property修改不会映射到attribute
• 推荐使用property