HTML Attributes 与 DOM Properties 的区别

　之所以写这篇文章，只因在学习HTML5及Angular的过程，直接将attributes与properties搞混了，毕竟中文翻译都叫「属性」，在使用上(对菜鸟而言)差异又是若有似无，因此为了区别，我想整理一下目前对HTML及DOM的理解，以及HTML Attributies及DOM Properties的差异，希望能帮助到你妳祢，如果在文章中发现任何我对它们的误解，也欢迎指正(*´ω`)人(´ω`*)。

Attributes与Properties怎么出现的？

　我们在网页中使用HTML标籤，并对这些标籤们设定attributes，而当浏览器解读HTML时，浏览器会产生相应的DOM node，这个DOM node其实就是个物件、而物件就会有它的Properties。

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'); //然后再取得它的attributesconst 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藏在这

　在网页中按下F12检查网页时，虽然比较常看CSS style怎么又没吃到了呢(#`Д´)ﾉ，其实在styles分页的隔壁隔壁隔壁，有个名叫Properties的邻居，在这里就可以看到目前选到的HTML标籤，它所拥有的>HTML某标籤Element Properties了喔^^。

本文参考、翻译自HTML Attributes vs DOM Properties By TAMAS PIROS