html 5中几个不容错过的api
之前的博文中，一直有关注一些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"><!-- 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"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");// 获得idvar 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 domainvar iframeWindow = document.getElementById("iframe").contentWindow;iframeWindow.postMessage("Hello from the first window!");// From inside the iframe on different host, receive messagewindow.addEventListener("message", function(event) {if(event.origin == "http://davidwalsh.name") {// Log out the messageconsole.log(event.data);// Send a message backevent.source.postMessage("Hello back!");}]);
5 autofocus
这个很简单了，自动focus到控件
<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>
页:
[1]