1.以下内容摘自博客：http://stylechen.com/attribute-property.html

DOM元素的attribute和property很容易混倄在一起，分不清楚，两者是不同的东西，但是两者又联系紧密。

attribute翻译成中文术语为“特性”，property翻译成中文术语为“属性”，从中文的字面意思来看，确实是有点区别了，先来说说attribute。

attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，attributes是一个类数组的容器，说得准确点就是NameNodeMap，总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

<div class="box" id="box" gameid="880">hello</div>

        

上面的div元素的HTML代码中有class、id还有自定义的gameid，这些特性都存放在attributes中，类似下面的形式：

[ class="box", id="box", gameid="880" ]

可以这样来访问attribute节点：

var elem = document.getElementById( 'box' );

console.log( elem.attributes[0].name ); // class

console.log( elem.attributes[0].value ); // box

 

但是IE6-7将很多东西都存放在attributes中，上面的访问方法和标准浏览器的返回结果又不同。通常要获取一个attribute节点直接用getAttribute方法：

console.log( elem.getAttribute('gameid') ); // 880

 

要设置一个attribute节点使用setAttribute方法，要删除就用removeAttribute：

elem.setAttribute('testAttr', 'testVal');

console.log( elem.removeAttribute('gameid') ); // undefined

 

attributes是会随着添加或删除attribute节点动态更新的。

 

property就是一个属性，如果把DOM元素看成是一个普通的Object对象，那么property就是一个以名值对(name=”value”)的形式存放在Object中的属性。要添加和删除property也简单多了，和普通的对象没啥分别：

elem.gameid = 880; // 添加

console.log( elem.gameid ) // 获取

delete elem.gameid // 删除

 

之所以attribute和property容易混倄在一起的原因是，很多attribute节点还有一个相对应的property属性，比如上面的div元素的id和class既是attribute，也有对应的property，不管使用哪种方法都可以访问和修改。

console.log( elem.getAttribute('id') ); // box

console.log( elem.id ); // box

elem.id = 'hello';

console.log( elem.getAttribute('id') ); // hello

 

但是对于自定义的attribute节点，或者自定义property，两者就没有关系了。

console.log( elem.getAttribute('gameid') ); // 880

console.log( elem.gameid ); // undefined

elem.areaid = '900';

console.log( elem.getAttribute('areaid') ) // null

 

对于IE6-7来说，没有区分attribute和property：

console.log( elem.getAttribute('gameid') ); // 880

console.log( elem.gameid ); // 880

elem.areaid = '900';

console.log( elem.getAttribute('areaid') ) // 900

很多新手朋友估计都很容易掉进这个坑中。

 

DOM元素一些默认常见的attribute节点都有与之对应的property属性，比较特殊的是一些值为Boolean类型的property，如一些表单元素：

var radio = document.getElementById( 'radio' );

console.log( radio.getAttribute('checked') ); // checked

console.log( radio.checked ); // true

 

对于这些特殊的attribute节点，只有存在该节点，对应的property的值就为true，如：

var radio = document.getElementById( 'radio' );

console.log( radio.getAttribute('checked') ); // anything

console.log( radio.checked ); // true

 

最后为了更好的区分attribute和property，基本可以总结为attribute节点都是在HTML代码中可见的，而property只是一个普通的名值对属性。

// gameid和id都是attribute节点

// id同时又可以通过property来访问和修改

<div class="box" id="box" gameid="880">hello</div>

// areaid仅仅是property

elem.areaid = 900;

 

 

 

2.补充内容如下：参考JavaScript高级程序设计

         HTMLElement 类型直接继承自 Element 并添加了一些属性。添加的这些属性分别对应于每个HTML元素的特性。添加的属性值如下：

 id ，元素在文档中的唯一标识符。

 title ，有关元素的附加说明信息，一般通过工具提示条显示出来。

 lang ，元素内容的语言代码，很少使用。

 dir ，语言的方向，值为 "ltr" （left-to-right，从左至右）或 "rtl" （right-to-left，从右至左），

也很少使用。

 className ，与元素的 class 特性对应，即为元素指定的CSS类。没有将这个属性命名为 class ，是因为 class 是 ECMAScript 的保留字。

 

         上述这些属性都可以用来取得或修改相应的特性值。以下面的 HTML 元素为例：

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

div标签中指定的所有特性，都可以通过属性取得：

var div = document.getElementById("myDiv");

alert(div.id); //"myDiv""

alert(div.className); //"bd"

alert(div.title); //"Body text"

alert(div.lang); //"en"

alert(div.dir); //"ltr"

 

当然，像下面这样通过为每个属性赋予新的值，也可以修改对应的每个特性：

div.id = "someOtherId";

div.className = "ft";

div.title = "Some other text";

div.lang = "fr";

div.dir ="rtl";

 

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

var div = document.getElementById("myDiv");

alert(div.getAttribute("id")); //"myDiv"

alert(div.getAttribute("class")); //"bd"

alert(div.getAttribute("title")); //"Body text"

alert(div.getAttribute("lang")); //"en"

alert(div.getAttribute("dir")); //"ltr"

 

注意，传递给 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- 前缀以便验证。

 

3.浏览器查看div元素的属性和特性：

 

      
  
       
1
  
       
2
  
       
3
      

 

 

 

Firefox浏览器中console.log(div)，打印div标签的属性如下图：

 

 

 

打印div标签的特性如下：

 

 

 

4.总结

1）对于html元素自有的特性attribute和属性property，通过特性或属性来获取、设置同一特性值或者属性值皆有效，且相互影响。

2）对于自定义的特性attribute和属性property，两者没有关系，不会互相影响。

3）元素的特性attribute其实是元素的属性attributes对象中的内容。所以不能直接通过.或者[]来获取。