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原创翻译