定义位置不同

attribute

• 是 HTML 标签上的某个属性，如 id、class、value 等以及自定义属性,定义后会呈现在标签上

property

• DOM 对象上的属性，比如value，className 以及一些 onclik 等方法

范围不同

• attributes 是属于 property 的一个子集
  

属性映射行为区别

• 在标签上定义的 HTML 标准属性会映射到 DOM 属性上，可以直接 element.property 获取
  • 非标准属性不会映射，只能通过 element.getAttribute 获取
  • data-* 的自定义属性，通过 element.dataset.x 获取
• 相同属性名称可能变化
  • 比如：elememt.getAttribute(“class”)、element.className
• 大部分属性修改会同步，但少部分不会，比如 input 标签的 value 属性

<input id="example" type="text" value="initial-value" />
<script>
  const exampleInput = document.getElementById('example');
  
  console.log(exampleInput.getAttribute('value')); // "initial-value"
  console.log(exampleInput.value); // "initial-value"

  // 修改 input 的值
  exampleInput.value = "new-value";

  console.log(exampleInput.getAttribute('value')); // "initial-value"
  console.log(exampleInput.value); // "new-value"
</script>

数据类型不同

• HTML 属性的值读写始终被转换成字符串（string）或 null，而 DOM 属性则可以是任何 JavaScript 数据类型，例如字符串、数字、布尔值或对象等。

大小写敏感区别

• HTML attribute 大小写不敏感，DOM property 大小写敏感

相同属性返回值可能不同

• HTML attribute 对于 href, 返回 html 设置的值，DOM property 对于 href 返回解析后的完整 url

DOM 属性具有写保护

• 比如设置 type为非标准值时，property 始终为标准值

var inputDom = document.querySelector('#inputId')
console.log(inputDom.getAttribute('type')) // text
console.log(inputDom.type) // text

inputDom.setAttribute('type','007')
console.log(inputDom.getAttribute('type')) // 007
console.log(inputDom.type) // text

inputDom.type = '008'
console.log(inputDom.getAttribute('type')) // 008
console.log(inputDom.type) // text