1)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"> 
<!-- 
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>

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 == "//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>

本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！