5個你不知道的HTML5 API

當談到或讀到 “HTML5” 相關話題時，一半的人都會感覺這玩意兒還跟獨角獸一樣，只能孤芳自賞。但這能怪我們么？我們看著基本 API 停滯很久了，連一個基本的特性 placeholder 都讓我們等上好一會兒。盡管很多 HTML5 特性在許多現代瀏覽器中都有實現，但是很多開發者卻沒有意識到那些我們能用上的一些更小而有用的 API。此文將這些 API 暴漏出來，希望能鼓勵你們去探索那些少為人知的 HTML5 API。

Element.classList

該 classList API提供了基本的Javascript 對 CSS 的控制，這在幾年前就可用了：

// 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");

閱讀此文查看其它 classList 屬性

ContextMenu API

新的 ContextMenu API 是很不錯的：可以不用重新定義瀏覽器的Context Menu，新的ContextMenu API 能夠讓你輕松地添加選項到瀏覽器的Context Menu中。

<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="推ter" icon="/images/推ter_icon.gif" onclick="goTo('//推ter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
      <menuitem label="非死book" icon="/images/非死book_icon16x16.gif" onclick="goTo('//非死book.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    </menu>
  </menu>
</section>

注意在使用 JavaScript 創建菜單標示前先使那些需要的選項事件生效。

Element.dataset

該 dataset API 允許開發者獲取或者設置 data- 屬性值：

/*  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>  

window.postMessage API

該 postMessage API 已經在IE8中支持了幾年，允許在windows和iframe元素之間傳送message。

// 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!");
  }
]);

Message 可能只是一些字符串，但是你可以使用JSON.stringify 和 JSON.parse 獲取更多有用的數據。

autofocus 屬性

autofocus 屬性能確保給定的 BUTTON，INPUT，TEXTAREA 元素能夠在頁面加載完畢后獲得焦點。

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

原文地址 / OSCHINA.NET原創翻譯