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

1: 獲取網(wǎng)頁(yè)元素的屬性值
HTML里面的標(biāo)簽，都有一些屬性（attribute），比方：

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

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

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

接下來看一個(gè)對(duì)照表：

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

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

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

這個(gè)時(shí)候，我們?cè)倩厝タ次覀兊腍TML, img元素的src就已經(jīng)變了：

3: getAttribute()和setAttribute()

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

1: 使用getAttribute()獲取attribute值

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

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

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

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

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

針對(duì)第三點(diǎn)做一個(gè)解釋，所以的‘非標(biāo)準(zhǔn)attribute’，就是只你自己給HTML元素加的attribute，比如：

我們給元素添加了一個(gè)‘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的值沒有被改變，但是也不會(huì)拋錯(cuò)，并且返回"ff"

4: 非標(biāo)準(zhǔn)HTML attribute的處理－dataset

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

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

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

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

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

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

hehe

那它的三個(gè)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

這里特別注意第二個(gè)和第三個(gè)，如果attribute是‘data-’后面超過一個(gè)單詞，而且單詞之間都用"-"連起來的話，在dataset里面必須是駝峰的形式。第三個(gè)例子之所以只能用‘fullname’而不是‘fullName’也是因?yàn)槲覀兦懊嬲f的‘駝峰’的關(guān)系，‘data-’后面的第一個(gè)單詞放到‘dataset’里面必須是小寫。HTML不區(qū)分大小寫，但是JavaScript是區(qū)分的。