HTML Attributes与DOM Properties的区别

之所以写这篇文章，只因在学习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了喔^^。