之所以写这篇文章，只因在学习HTML5及Angular的过程，直接将attributes与properties搞混了，毕竟中文翻译都叫「属性」，在使用上（对菜鸟而言）差异又是若有似无，因此为了区别，我想整理一下目前对HTML及DOM的理解，以及HTML Attributies及DOM Properties的差异，希望能帮助到你你祢，如果在文章中发现任何我对它们的误解，也欢迎指正（*´ω`）人（´ω`*）。
Attributes与Properties怎么出现的？
我们在网页中使用HTML标签，并对这些标签们设定attributes，而当浏览器解读HTML时，浏览器会产生相应的DOM node，这个DOM node其实就是个物件、而物件就会有它的Properties(chao-ok-huangdaoyi)。
HTML Attributes与DOM Properties是怎样的存在？
你知道HTML是个标记语言、XML也是（当然还有其他很多），所以它们都是靠attributes设定的；而DOM是Document Object Model的缩写，它就是个物件（Object），就是靠Properties运作的喔。
DOM其实是个独立的存在，虽然我们在写HTML5时，大多都用JavaScript来操作它的Properties，不过其它语言、例如Python也是可以使用DOM Properties的。
HTML Attributes跟DOM Properties长怎样？
那么我们就来看看HTML Attributes跟DOM Properties到底长怎样吧，在这里我们先创个HTML的input标签：
<input type=“text”id=“inputBox”value=“Hello！”>
然后使用JavaScript来取得的一个名叫.attributes的DOM Property，来取得此input标签的attributes们。
并且继续使用名叫.name及.value的DOM Properties，来取得input标签的Attributes的名字与值。
//先从DOM中抓到id是inputBox的那位
const inputBox = document.getElementById（'inputBox'）；
//然后再取得它的attributes
const attrs = inputBox.attributes；
//最后使用for循环印出它拥有的attributes名字与值
for（var i = attrs.length - 1；i >= 0；i--）{
console.log（`${attrs[i].name} ==> ${attrs[i].value}`）；
}
//这就是我们得到的结果
// id ==> inputBox
// value ==> Hello！
// type ==> text
就…当DOM node生成的时候，很多DOM Properties都跟HTML attributes有同样的名字，但却又不能说它们就是一样的，怎么说呢？看看上方的例子，id与type基本上它们的DOM Properties与HTML attributes有一样的结果，不过value就难说了：
const inputBox = document.getElementById（'inputBox'）；
console.log（
inputBox.id === inputBox.getAttribute（'id'）// true
）；
console.log（
inputBox.type === inputBox.getAttribute（'type'）// true
）；
setTimeout（（）=> {
console.log（
inputBox.value === inputBox.getAttribute（'value'）// false if value changed
）；
console.log（`inputBox.value is ${inputBox.value} and inputBox.getAttribute（'value'）is ${inputBox.getAttribute（'value'）}`）；
}，5000）；
慢5秒印出value是为了让我们在input框内输入一些文字，此时就会发现.getAttribute（）印出的是我们编辑HTML时写在里的value值、也就是Hello！，而.value则是我们在input框中输入的即时的值。
虽然DOM Properties与HTML attributes常有一样的名字、也常有一样的值，不过value就是网页开发时，一定会遇到的DOM Properties与HTML attributes不一样的例子。
多多参考W3C与F12
看看HTML attributes吧
在W3C查询HTML标签时，它很好心的将此标签可使用的attributes列表出来了。
DOM properties藏在这(bulunmaztiyatro)
在网页中按下F12检查网页时，虽然比较常看CSS style怎么又没吃到了呢（#`Д´）ﾉ，其实在styles分页的隔壁隔壁隔壁，有个名叫Properties的邻居，在这里就可以看到目前选到的HTML标签，它所拥有的> HTML某标签Element Properties了喔^^。