HTML特性（attribute）和DOM属性（property）-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML特性（attribute）和DOM属性（property）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

定义位置不同

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