1.特性

    每個DOM元素都有一或多個特性，特性用來給出相應元素或其內容的附加資訊，特性名稱不區分大小寫。

    特性設定：通過在HTML文件標籤中設定`attributeName='value'`，或者通過`element.setAttribute('attributeName','value')`設定；
    特性訪問：通過`element.getAttribute(attributeName)`取得特性值；
    刪除特性：通過方法`element.removeAttribute()`。

    特性有公認特性（如id,class,title,lang,dir）和自定義特性。需要注意的是，根據HTML5規範，自定義特性要加上data-字首以便驗證。
    此外，通過`element.attributes`可以訪問元素的所有特性，包括公認特性和自定義特性，結果是一個NameNodeMap，類似NodeList，是
一個“動態”集合。
 

2.屬性

    屬性，說成是DOM物件的屬性更容易理解，即通過`element.propertyName`進行設定和訪問。通過`delete element.propertyName`進行刪除。

3.屬性與特性的聯絡

    對於元素公認特性，元素也有相應的屬性與其一一對應，即只有公認特性會以屬性的形式新增到DOM物件中。
    可以通過`element.propertyName`訪問到與元素特性值相同的元素屬性的值，在這裡，特性和屬性是雙向的，即通過`element.getAttribute()`
改變了元素特性，那麼相應的屬性值也會跟著變化，同樣，通過`element.propertyName`改變元素屬性，那麼相應的特性也會跟著變化。
需注意，特性名不總是與屬性名相同，例如特性class對應的屬性名為className。

    元素自定義特性，在元素中不存在相應屬性，即不能以`element.propertyName`的形式訪問到其相應屬性。在這裡，特性和屬性沒有關係，即通
過`element.setAttribute()`設定的元素自定義特性，沒有屬性與之相對應，同樣，通過`element.propertyName`設定的自定義屬性，也不能通過
`element.getAttribute()`訪問到。
 

4.特例

    有兩類特殊的公認特性，雖然有對應的屬性名，但是屬性的值與通過`getAttribute()`返回的值不同：
    (1)style：通過屬性訪問，即`element.style`,返回一個物件；通過`element.getAttribute('style')`訪問，返回CSS文字。
    (2)onclick這樣的事件處理程式：通過屬性訪問，即`element.onclick`,返回一個JavaScript函式或者null；通過`element.getAttribute('onclick')`
訪問，返回相應程式碼的字串。

    因此，在通過JavaScript以程式設計方式操作DOM時，不經常使用`getAttribute()`，只是用物件的屬性。只在需要訪問自定義特性值的情況下才
使用`getAttribute()`。
 

5.測試程式碼

HTML

<div id="myDiv" dir="ltr" myAttribute="myattribute" class="helloClass">Hello</div>

JS

//取得HTML元素
var div = document.getElementById('myDiv');
//訪問屬性
console.log(div.dir);//ltr
console.log(div.myAttribute);//undefined
console.log(div.className);//helloClass
//訪問特性
console.log(div.getAttribute('id'));//myDiv
console.log(div.getAttribute('myAttribute'));//myattribute

//設定自定義特性
div.setAttribute('myTestAttribute1','myTestAttribute1');
//設定公認特性
div.setAttribute('title','divTitle');
//設定自定義屬性
div.myTestAttribute2 = 'myTestAttribute2';
//設定公認特性對應的屬性
div.dir = 'rtl';

//訪問公認特性對應的屬性
console.log(div.title);
console.log(div.dir);
//訪問公認特性
console.log(div.getAttribute('title'));
//訪問自定義屬性
console.log(div.myTestAttribute2);//myTestAttribute2
//訪問自定義屬性對應的特性
console.log(div.getAttribute('myTestAttribute2'));//null
//訪問通過屬性設定的公認特性
console.log(div.getAttribute('dir'));//rtl
//訪問元素所有特性，包括公認特性和自定義特性
console.log(Array.prototype.slice.call(div.attributes,0));//[id, dir, myattribute, class, mytestattribute1, title]