5个HTML5 API

 

Element.classList

classList API提供了一个CSS控制器，而这功能以前都是通过JavaScript实现的：

1. 			// Add a class to an element  

2. myElement.classList.add("newClass");  
3.  
4. // Remove a class to an element  
5. myElement.classList.remove("existingClass");  
6.  
7. // Check for existence  
8. myElement.classList.contains("oneClass");  
9.  
10. // Toggle a class  
11. myElement.classList.toggle("anotherClass"); 

该API最大的优点是：简单和智能，阅读这篇文章了解更多的classList属性。

ContextMenu API

ContextMenu API是一个非常出色的菜单API，无需重写浏览器上下文菜单即可把item添加到浏览器菜单中，非常简单、方便。

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>

备注：最好使用JavaScript创建菜单标记，因为item的动作还是由JavaScript执行，如果JavaScript被关闭那么留一个不能执行的菜单也没用。

Element.dataset

dataset这个API可以帮助开发人员轻松获取(get)或设置(set)数据属性值：

1. 			/*  Assuming element:  

2.  
3.   <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
4.  
5. */  
6.  
7. // Get the element  
8. var element = document.getElementById("myDiv");  
9.  
10. // Get the id  
11. var id = element.dataset.id;  
12.  
13. // Retrieves "data-my-custom-key"  
14. var customKey = element.dataset.myCustomKey;  
15.  
16. // Sets the value to something else  
17. element.dataset.myCustomKey = "Some other value";  
18.  
19.   // Element becomes:  
20.   //    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>   

无需多说，和classList一样，简单有效。

window.postMessage API

IE8很早就开始支持postMessage API，它允许消息在windows和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.   // Make sure we trust the sending domain  
8.   if(event.origin == "http://davidwalsh.name") {  
9.     // Log out the message  
10.     console.log(event.data);  
11.  
12.     // Send a message back  
13.     event.source.postMessage("Hello back!");  
14.   }  
15. ]);  

消息只能是字符串类型，使用JSON.stringify和JSON.parse可以解析更多有意义的数据。

autofocus Attribute

当页面完成时，autofocus（自动对焦）属性可以帮助一个给定的Button、Input或TextArea元素自动获取焦点。

1. 			<input autofocus="autofocus" /> 

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

每个浏览器会支持不同的API，所以在使用之前请认真阅读使用说明，希望能帮助你更好的使用API。