HTML 5中几个不容错过的API

文章转自：http://www.xcoder.cn/html/web/Client/2012/1007/6.html

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

　　1.element.classList

　　详细的可以参考这里

　　这里简单说下，它其实是一个快速对某个元素的class进行操作的新的DOM API了，比如包括了add,remove，toggle,contains的方法，比如：

1 myDiv.classList.add( ' myCssClass'); 
2 myDiv.classList.remove( ' myCssClass'); 
3 myDiv.classList.toggle( ' myCssClass'); //now it's added 
4 myDiv.classList.toggle( ' myCssClass'); //now it's removed 
5 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的，用来可以生成简单的可以点击的上下文菜单，能给用户快速的选择和显示，比如:

1 <section contextmenu= " mymenu ">
2   <!-- 
3      For the purpose of cleanliness, 
4     I ' ll put my menu inside the element that will use it 
5   -->
6 
7   <!-- add the menu -->
8   <menu type= " context " id= " mymenu ">
9       <menuitem label= " Refresh Post " onclick= " window.location.reload(); " icon= " /images/refresh-icon.png "></menuitem>
10       <menu label= " Share on... " icon= " /images/share_icon.gif ">
11         <menuitem label= " Twitter " icon= " /images/twitter_icon.gif " onclick= " goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href); "></menuitem>
12         <menuitem label= " Facebook " icon= " /images/facebook_icon16x16.gif " onclick= " goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href); "></menuitem>
13       </menu>
14     </menu>
15 </section>

        3.element.dataset

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

　　比如：

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

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

1 // 获得元素
2 var element = document.getElementById( " myDiv ");
3 
4 // 获得id
5 var id = element.dataset.id;
6 
7 // 获得data-my-custom-key "
8 var customKey = element.dataset.myCustomKey;
9 
10 // 设置新的值
11 element.dataset.myCustomKey =  " Some other value ";

        4.postMessage API

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

1 // From window  or frame  on domain  1, send a message  to the iframe which hosts another domain
2 var iframeWindow = document.getElementById( " iframe ").contentWindow;
3 iframeWindow.postMessage( " Hello from the first window! ");
4 
5 // From inside the iframe  on different host, receive message
6 window.addEventListener( " message ",  function(event) {
7          if(event.origin ==  " http://davidwalsh.name ") {
8         //  Log out the message
9         console.log(event.data);
10 
11         // Send a message back
12         event.source.postMessage( " Hello back! ");
13     }
14 ]);

        5.autofocus

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

1 <input autofocus= " autofocus " /> 
2 <button autofocus= " autofocus ">Hi!</button> 
3 <textarea autofocus= " autofocus "></textarea>