摘要：可以是字符串，布爾值得，對象，數字等。但是這樣的后果是，這些元素也不是合法的文檔了。

1: 獲取網頁元素的屬性值
HTML里面的標簽，都有一些屬性（attribute），比方：

這里的"href", "id"和"class"都是這個""元素的attribute。而在我們的HTMLElement里，定義了與之對應的屬性(property)，通過引用它們，可以得到這些元素的attribute的價值，例如：

我們可以通過在在我們獲取的HTMLElement上用引用這些同名的property，就能獲得HTML元素對應的attribute的值。
但是，或許你注意到了，我們使用了"img.className"而不是"img.class"來獲取了這個圖片元素的class的值。這是因為，從attribute到property，并不是所有的都是同名的，是有一些規則的：

1: HTML的attribute不區分大小寫，但是javaScript的property是區分的。所以引用property時，應該用小寫。但是對于本身attribute是超過一個單詞的，property應該用駝峰，例如：defaultChecked, tabIndex
3: 如果attribute是javaScript的保留字，那對應的property是在attribute前面加"html"。比如"",我們要通過‘htmlFor’來得到‘xxyyzz’. 但是‘class’是一個特殊，它的property是‘className’,而不是‘htmlCss’.

接下來看一個對照表：

2：設置網頁元素的屬性值
我們通過直接給HTMLElement的property賦值，就可以改變HTML元素的attribute的值。比如我們一開始有一段html:

然后我們通過javaScript來改變它的src:

var img = document.getElementById("logo");
img.src = "http://www.new.com/logo.png"

這個時候，我們再回去看我們的HTML, img元素的src就已經變了：

3: getAttribute()和setAttribute()

除了上面提到的，可以直接通過property來獲取和設置HTML元素的attribute值，javaScript還提供了額外的兩個方法：getAttribute()和setAttribute()。還是上面的那個img元素：

1: 使用getAttribute()獲取attribute值

var img = document.getElementById("logo");
img.getAttribute("class"); //"logo red"

2: 使用setAttribute()來設置attribute值

var img = document.getElementById("logo");
img.setAttribute("src", "http://www.new-again.com/logo.png");

咋看好像這兩個方法跟上面直接用property是一樣的，但是其實它們直接還是有一些差別的：

1: 返回結果類型不一樣
    1: 通過"element.property"這種方式返回的值的類型，跟attribute值的類型一樣。可以是字符串，布爾值得，對象，數字等。
    2: 通過"element.getAttribute()"返回的結果都是字符串類型，不管HTML元素的attribute值是什么類型。
2: 對屬性名名稱的對應規則不一樣
    1: 通過"element.property"這種方式，property的名字和HTML的attribute不一定一摸一樣，有些還要經過轉換之類的，比如：class->className, for->htmlFor
    2: 通過"element.getAttribute()"呢，參數名字和HTML的attribute名字一模一樣，比如：img.getAttribute("class")//參數是‘class’,而不是‘className’
3: getAttribute()可以獲取HTML元素的非標準的attribute值，但是"element.property"卻不能。

針對第三點做一個解釋，所以的‘非標準attribute’，就是只你自己給HTML元素加的attribute，比如：

我們給元素添加了一個‘job’ attribute, 然后嘗試用兩種不同的方法獲取它的值：

var img = document.getElementById("logo");
img.job;//undefined
img.getAttribute("job"); //"as a log"
img.setAttribute("job", "hehe");// img元素的job屬性的值被改變
img.job = "ff";//img元素的job的值沒有被改變，但是也不會拋錯，并且返回"ff"

4: 非標準HTML attribute的處理－dataset

像之前提到的，我們可以給HTML元素添加非標準的attribute，并且通過getAttribute()和seAttribute()來獲取/設置它們的值。但是這樣的后果是，這些HTML元素也不是合法的文檔了。為了解決這個問題，HTML5允許我們給HTML元素添加以‘data-’開頭的任何attribute，例如"data-job", "data-full-name"。這樣的HTML元素還是合法的。
但是對于這類型的attribute，他們的取值和設值，都會有點特殊，接下來我們一一看一下：
加入我們的HTML長這樣：

hehe

1: 用getAttribute()來取值

var hint = document.getElementById("hint");
1: "data-job"
    1: getAttribute("data-job");//as a hint
    2: getAttribute("data-joB");//as a hint
    3: hint.getAttribute("dataJob");//null
    
2: "data-job-title"
    1: hint.getAttribute("data-job-title");//manager
    2: hint.getAttribute("data-joB-title");//manager
    3: hint.getAttribute("data-jobTitle");//null
    
3: "data-jobTitle"
    1: hint.getAttribute("data-JobTitle"); //manager
    2: hint.getAttribute("dataJobTitle"); //null

從以上三個例子可以看出來，用getAttribute()來取值的時候，只要保證這個中線"-"和各個單詞之間的鏈接關系不變，在各個單詞內部無論怎么大小寫的變化，都是可以取到值的。

2: 用dataset來取值
對于標準的HTML attribute, 我們通過Element上相應的property也可以取到值；但是對于這些非標準的attribute，卻不能直接就取到，而是要通過一個dataset.
dataset是定義在Elements傷的屬性，它是一個對象，所有的這些‘data-xxx’的HTML attribute都會存在里面。只是，這些HTML attribute在dataset里的鍵名，是去掉"data-"之后的，現在來看一下不同的情況：

1: data-job -> dataset.job
2: data-job-title -> dataset.jobTitle
3: data-jobTitle - dataset.jobtitle

加入我們又這樣的一段HTMl:

hehe

那它的三個attribute用dataset來取值：

var hint = document.getElementById("hint");

1: data-job
    hint.dataset.job; //as a hint
    hint.dataset.Job;//undefined
    
2: data-job-title
    hint.dataset.jobTitle; //manager
    hint.dataset.jobtitle;//undefined
    
3: data-fullName
    hint.dataset.fullname;//password hint
    hint.dataset.fullName://undefined

這里特別注意第二個和第三個，如果attribute是‘data-’后面超過一個單詞，而且單詞之間都用"-"連起來的話，在dataset里面必須是駝峰的形式。第三個例子之所以只能用‘fullname’而不是‘fullName’也是因為我們前面說的‘駝峰’的關系，‘data-’后面的第一個單詞放到‘dataset’里面必須是小寫。HTML不區分大小寫，但是JavaScript是區分的。