每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用，包括那些以HTMLElement类型属性的形式定义的特性。来看下面的例子：

var div=document.getElementById("myDiv");
alert(div.getAttribute("id"));
alert(div.getAttribute("class"));
alert(div.getAttribute("title"));
alert(div.getAttribute("lang"));
alert(div.getAttribute("dir"));

注意，传递给getAttribute()的特性名与实际的特性名相同。因此要想得到class特性值，应该传入class而不是className，后者只有在通过对象属性访问特性时才用。如果给定名称的特性不存在，getAttribute()返回null。通过getAttribute()方法也可以取得自定义特性（即标准HTML语言中没有的特性）的值，以下面的元素为例：

<div id="myDiv" my_special_attribute="hello!"></div>

这个元素包含一个名为my_special_attribute的自定义特性，它的值是hello!。可以像取得其他特性一样取得这个值：
var value=div.getAttribute("my_special_attribute");
不过，特性的名称是不区分大小写的，即ID和id代表的都是同一个特性。另外也要注意，根据HTML5规范，自定义特性应该加上data-前缀以便验证。任何元素的所有特性，也都可以通过DOM元素本身的属性来访问。当然，HTMLElement也会有5个属性与相应的特性一一对应。不过，只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中。以下面的元素为例：

<div id="myDiv" align="left" my_special_attribute="hello!"></div>

因为id和align在HTML中是<div>的公认特性，因此该元素的DOM对象中也将存在对应的属性。不过，自定义特性my_special_attribute在Safari、Chrome、Firefox及Opera中是不存在的，但IE却会为自定义特性也创建属性，如下面的例子所示：

<script type="text/javascript">
(function(){
  var myDiv=document.createElement("div");
  myDiv.setAttribute("id","myDiv");
  myDiv.setAttribute("align","left");
  myDiv.setAttribute("my_special_attribute","hello!");
  document.body.appendChild(myDiv);
  LS.log.write(myDiv.id);
  LS.log.write(myDiv.my_special_attribute);  //undefined(IE除外)
  LS.log.write(myDiv.align);
})();
</script>

点击运行以上代码

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()方法返回的值并不相同。第一类特性就是style，用于通过CSS为元素指定样式。在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个对象。由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性。第二类与众不同的特性是onclick这样的事件处理程序。当在元素上使用时，onclick特性中包含的是JavaScript代码，如果通过getAttribute()访问，则会返回相应代码的字符串。而在访问onclick属性时，则会返回一个JavaScript函数(如果未在元素中指定相应特性，则返回null)。这是因为onclick及其他事件处理程序属性本身就应该被赋予函数值。由于存在这些差别，在通过JavaScript以编程方式操作DOM时，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法。

在IE7及以前版本中，通过getAttribute()方法访问style特性或onclick这样的事件处理特性时，返回的值与属性的值相同。换句话说，getAttribute("style")返回一个对象，而getAttribute("onclick")返回一个函数。虽然IE8已经修复了这个bug，但不同IE版本间的不一致性，也是导致开发人员不使用getAttribute()访问HTML特性的一个原因。

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来看一个例子：

<div id="myDiv" data-appid="12345" data-myname="Nicholas"></div>

添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀（比如，自定义属性是data-myname，那映射中对应的属性就是myname）。

<script type="text/javascript">
document.getElementById("jsButton2").onclick=function(event){
  var div=document.getElementById("myDiv");
  //取得自定义属性的值
  LS.log.write(div.dataset.appid);
  LS.log.write(div.dataset.myname);
  //设置值
  div.dataset.appid=2345;
  div.dataset.myname="wangzhanchengxu.com";
  if(div.dataset.myname){
    LS.log.write("welcome to "+div.dataset.myname);
  }
};
</script>

点击运行以上代码

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能方便地知道点击来自页面中的哪个部分。