HTML 5中几个不容错过的API-优快云博客

本文介绍了HTML5中几个值得关注的特性，包括element.classList用于快速操作元素类，ContextMenu API简化上下文菜单创建，element.dataset方便获取自定义数据属性，postMessage API实现跨域消息传递，以及autofocus自动聚焦输入元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章转自：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   
6
7   
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>

转载于:https://my.oschina.net/u/1179629/blog/143647