之前的博文中，一直有关注一些HTML 5中的值得关注但少用的API或者tips，这次继续小结一些。

1)element.classList

详细的可以参考

https://developer.mozilla.org/en-US/docs/DOM/element.classList

这里简单说下，它其实是一个快速对某个元素的class进行操作的新的DOM API了，比如

包括了add,remove，toggle,contains的方法，比如

myDiv.classList.add('myCssClass');

myDiv.classList.remove('myCssClass');

myDiv.classList.toggle('myCssClass'); //now it's added

myDiv.classList.toggle('myCssClass'); //now it's removed

myDiv.classList.contains('myCssClass'); //returns true or false

现在的浏览器支持情况为：

chrome 8.0+,ie 10,opera 11.5,safari 5.1

2)ContextMenu 上下文菜单 API

这个API是HTML 5的，用来可以生成简单的可以点击的上下文菜单，能给用户快速的选择和显示，比如

<section contextmenu="mymenu">

<>

<>

<menu type="context" id="mymenu">

<menuitem label="Refresh Post" icon="/images/refresh-icon.png"></menuitem>

<menu label="Share on..." icon="/images/share_icon.gif">

<menuitem label="Twitter" icon="/images/twitter_icon.gif"></menuitem>

<menuitem label="Facebook" icon="/images/facebook_icon16x16.gif"></menuitem>

</menu>

</menu>

</section>

3)element.dataset

这个API用来获得键值对的时候很有用：

比如：

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

则通过下面这些可以获得键值对，这个用在jquery mobile中很实用：

// 获得元素

var element = document.getElementById("myDiv");

// 获得id

var id = element.dataset.id;

// 获得data-my-custom-key"

var customKey = element.dataset.myCustomKey;

// 设置新的值

element.dataset.myCustomKey = "Some other value";

4)postMessage API

这个居然在IE 8后就支持了，可以支持在不同domain的iframe中传递消息

// 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) {

if(event.origin == "http://davidwalsh.name") {

// Log out the message

console.log(event.data);

// Send a message back

event.source.postMessage("Hello back!");

}

]);

5)autofocus

这个很简单了，自动focus到控件

<input autofocus="autofocus" />

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

<textarea autofocus="autofocus"></textarea>