一提到HTML5，你腦海里是不是閃現(xiàn)這樣的畫面：“一大堆脫衣舞女和獨角獸走進房間，然后演奏著 I’m Sexy and I know it”。產(chǎn)生這樣的想法難道是我們的錯嗎？API的停滯不前，使一些基本的特性，例如使用“占位符”都需要“花一分鐘”。盡管HTML5的許多功能都已經(jīng)在現(xiàn)代瀏覽器中實現(xiàn)，但開發(fā)者卻很少關注那些輕量且非常實用的API。本文就將為您“曝光”5個你所不知道的API，并且希望你能探索出更多的HTML5 API，助你在這條路上走的更遠。

Element.classList

classList API提供了一個CSS控制器，而這功能以前都是通過JavaScript實現(xiàn)的：

// Add a class to an element  
myElement.classList.add("newClass");  
 
// Remove a class to an element  
myElement.classList.remove("existingClass");  
 
// Check for existence  
myElement.classList.contains("oneClass");  
 
// Toggle a class  
myElement.classList.toggle("anotherClass"); 

該API最大的優(yōu)點是：簡單和智能，閱讀這篇文章了解更多的classList屬性。

ContextMenu API

ContextMenu API是一個非常出色的菜單API，無需重寫瀏覽器上下文菜單即可把item添加到瀏覽器菜單中，非常簡單、方便。

<section contextmenu="mymenu"> 
  <!--   
    For the purpose of cleanliness,   
    I'll put my menu inside the element that will use it   
  --> 
 
  <!-- add the menu --> 
  <menu type="context" id="mymenu"> 
    <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem> 
    <menu label="Share on..." icon="/images/share_icon.gif"> 
      <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem> 
      <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> 
    </menu> 
  </menu> 
</section> 

備注：最好使用JavaScript創(chuàng)建菜單標記，因為item的動作還是由JavaScript執(zhí)行，如果JavaScript被關閉那么留一個不能執(zhí)行的菜單也沒用。

Element.dataset

dataset這個API可以幫助開發(fā)人員輕松獲取(get)或設置(set)數(shù)據(jù)屬性值：

/*  Assuming element:  
 
  <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div> 
 
*/  
 
// Get the element  
var element = document.getElementById("myDiv");  
 
// Get the id  
var id = element.dataset.id;  
 
// Retrieves "data-my-custom-key"  
var customKey = element.dataset.myCustomKey;  
 
// Sets the value to something else  
element.dataset.myCustomKey = "Some other value";  
 
  // Element becomes:  
  //    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>   

無需多說，和classList一樣，簡單有效。

window.postMessage API

IE8很早就開始支持postMessage API，它允許消息在windows和iframe之間發(fā)送：

// From window or frame on domain 1, send a message to the iframe which hosts another domain  
var iframeWindow = document.getElementById("iframe").contentWindow;  
iframeWindow.postMessage("Hello from the first window!");  
 
// From inside the iframe on different host, receive message  
window.addEventListener("message", function(event) {  
  // Make sure we trust the sending domain  
  if(event.origin == "http://davidwalsh.name") {  
    // Log out the message  
    console.log(event.data);  
 
    // Send a message back  
    event.source.postMessage("Hello back!");  
  }  
]);  

消息只能是字符串類型，使用JSON.stringify和JSON.parse可以解析更多有意義的數(shù)據(jù)。

autofocus Attribute

當頁面完成時，autofocus（自動對焦）屬性可以幫助一個給定的Button、Input或TextArea元素自動獲取焦點。

<input autofocus="autofocus" /> 
<button autofocus="autofocus">Hi!</button> 
<textarea autofocus="autofocus"></textarea> 

每個瀏覽器會支持不同的API，所以在使用之前請認真閱讀使用說明，希望能幫助你更好的使用API。（編譯/張紅月 英文來自：david walsh blog）