JavaScript - Attributes、Properties 异同

理清概念

attributes 属于 HTML。为了易于区别，我们译为特性。

properties 属于 DOM，译为属性，而在 JavaScript 中我们操作 HTML 时使用的就是 DOM。

Attribute（特性）

attributes 由 HTML 来定义，像是id、title、class等等。

比如这样一段html代码，input 元素就有三个 attribute。

<input  type='text'  id='txt'  a=b />

HTML 元素映射到 DOM 是 HTMLElement 类型的节点对象，HTMLElement 类型的节点对象有一个 attributes 属性，这个属性本身也是一个对象，HTML 元素的所有 attribute 都包含在这个对象里面。

打印出的一个attributes对象

attributes 对象特点：

以动态集合的方式存在（NamedNodeMap）
只能是字符串
大小写不敏感

attributes 对象本身也有一些操作 HTML 的 attribute 的方法，但是实际上，这个对象极少使用。一般都是通过 HTMlElement 节点对象的几个方法来操作 HTML 的 attribute。

elem.hasAttribute(name)  // 检查 attribute 是否存在
elem.getAttribute(name)  // 获得 attribute
elem.setAttribute(name, value)  // 设置 attribute 的值
elem.removeAttribute(name)  // 删除 attribute

Property（属性）

在JS里面我们使用 DOM 来操作 HTML 元素，DOM 为了操作 HTML ，将 HTML 中的元素描绘成一个个的节点，HTML 元素的每一个公认的（非自定义的） attribute 映射为节点对象上一个个的 property 。

properties 特点：

可以是任何的数据类型，
对大小写敏感，
js 中自定义的 property 不会出现在 html 代码中，只存在 js 中

例：

<div id="myDiv" class="bd" title="Body text"></div>

在 HTML 中，div是一个元素，id、class、title是它的attributes（特性）；
在 DOM 中，div元素为HTMLElement类型的节点对象，id、className、title是它的properties（属性）。

有些 HTML 特性是 JavaScript 的保留字，转为 property 时，必须改名。主要是以下两个。

for 属性改为 htmlFor

class 属性改为 className

dataset 属性

上面我们讲了，HTML 元素的每一个 公认的（非自定义的） attribute 映射为节点对象上一个个的 property 。那么自定义的怎么办？

有时，需要在HTML元素上附加数据，供JavaScript脚本使用。一种解决方法是自定义特性。

<div id="mydiv" foo="bar">

上面代码为 div 元素自定义了 foo 特性，然后可以用getAttribute()和setAttribute()读写这个特性。这种方法虽然可以达到目的，但是会使得HTML元素的属性不符合标准，导致网页的HTML代码通不过校验。

更好的解决方法是，使用标准提供的data-*特性。

<div id="mydiv" data-foo="bar">

HTMLElement 节点对象有一个 dataset 属性，它本身也是一个对象，可以用来操作 HTML 元素的data-*特性。

var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'

注意，data-后面的属性名有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_)。而且，属性名不应该使用 A 到 Z 的大写字母，比如不能有data-helloWorld这样的属性名，而要写成data-hello-world。

转成 dataset 的键名时，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。反过来，dataset 的键名转成属性名时，所有大写字母都会被转成连词线+该字母的小写形式，其他字符不变。比如，dataset.helloWorld会转成data-hello-world。

相通之处

公认的（非自定义的）attribute，如id、class、titile等，都会有对应的 property 映射。

公认的（非自定义的） property 或 attribute 的变化多数是联动的。
attribute 更改时，相应的 property 将自动更新，反之亦然。

// HTML
// <div id="test" class="button"></div>

var div = document.getElementById('test');
div.className = 'red-input';
div.getAttribute('class');   // "red-input"

div.setAttribute('class','green-input');
div.className;   // "green-input"

但是有例外，带有默认值的 attribute 不随 property 变化而变化。

// HTML
// <input id="search" value="foo" />

var input = document.getElementById('search');
input.value = 'foo2';
input.getAttribute('value');   // "foo"

不同之处

有几类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。如href，src，value，style，onclick等事件处理程序。

href、src
getAttribute() 获取的是 href 的实际值，而点号获取的是完整的 url，存在浏览器差异。

<a href="#"></a>
<script>
    var a  = document.body.children[0]
    a.href = '/'
    alert( 'attribute:' + a.getAttribute('href') ) // '/'
    alert( 'property:' + a.href )  // IE: '/'; others: full URL
</script>

style，用于通过CSS为元素指定样式。
在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个对象。由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性。
onclick这样的事件处理程序。
当在元素上使用时，onclick特性中包含的是 JavaScript 代码，如果通过getAttribute()访问，则会返回相应代码的字符串。而在 DOM 中访问onclick属性时，则会返回一个 JavaScript函数（如果未在元素中指定相应特性，则返回null）。这是因为 onclick 及其他事件处理程序属性本身就应该被赋予函数值。

由于存在这些差别，在通过 JavaScript 以编程方式操作 DOM 时，开发人员不经常使getAttribute()，而是只使用对象的属性。

参考：

JavaScript - Attributes、Properties 异同