Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

带着问题学习

什么是HTML Arrtibutes？
什么是 DOM Properties？
两者区别是什么？ vue3中是怎么用的？经验之谈，根据不同情况去做特殊设置

什么是HTML Arrtibutes？

在 HTML 中，标签可能拥有特性（attributes）。当浏览器解析 HTML 文本，并根据标签创建 DOM 对象时，浏览器会辨别 标准的 特性并以此创建 DOM 属性。

当有标准的的特性时（attributes），DOM也会有相同的属性（Properties）

但是不是所有的特性都会在DOM上有相同的属性，比如<input>标签的type特性。在<div>标签上就没有

特性的方法如下

elem.hasAttribute(name) — 检查特性是否存在。
elem.getAttribute(name) — 获取这个特性值。
elem.setAttribute(name, value) — 设置这个特性值。
elem.removeAttribute(name) — 移除这个特性。
elem.attributes — 获取所有的特性

  <body someAttr="no">
    <script>
      console.log(document.body.attributes);
    </script>
  </body>

HTML 特性都包含以下特征

不区分大小写
值是字符串类型

什么是 DOM Properties？

一个DOM对象有很多的属性，这些就叫做DOM Properties

我们可以自定义Dom对象的属性，也可以修改内建属性的原型

Element.prototype.sayHi = function() {
    alert(`Hello, I'm ${this.tagName}`); 
}; 
document.documentElement.sayHi(); // Hello, I'm HTML 
document.body.sayHi(); // Hello, I'm BODY

DOM属性和方法就像普通JavaScript对象一样

区分大小写
可以自定义

两者区别是什么？

属性—特性同步

当一个标准的特性改变，对应的属性也会随之改变，反之也是如此（除了一些特例）

<input>

<script>
  let input = document.querySelector('input');

  // 特性 => 属性
  input.setAttribute('value', 'text');
  alert(input.value); // text

  // 这个操作无效，属性 => 特性
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text（没有被更新！）
</script>

核心原则：HTML Attribute 的作用是设置与之对应的DOM Properties的初始值

DOM属性是多种类型的

DOM属性可以是字符串，布尔值，对象，URL等等

非标准特性 dataset

所有以 “data-” 开头的特性均被保留供程序员使用。它们可在 dataset 属性中使用。

总结

特性（attribute）— 写在 HTML 中的内容。
属性（property）— DOM 对象中的内容。

简略的对比：

	属性	特性
类型	任何值，标准的属性具有规范中描述的类型	字符串
名字	名字（name）是大小写敏感的	名字（name）是大小写不敏感的

操作特性的方法：

elem.hasAttribute(name) — 检查是否存在这个特性。
elem.getAttribute(name) — 获取这个特性值。
elem.setAttribute(name, value) — 设置这个特性值。
elem.removeAttribute(name) — 移除这个特性。
elem.attributes — 所有特性的集合。