Five HTML5 APIs you don't know

When it comes to HTML5, is there a picture like this in your mind: "A lot of dancers and unicorns go into the room and play I'm sexy and I know it ". Is this our mistake? API stagnation makes some basic features. For example, it takes "One minute" to use placeholders ". Although many HTML5 functions have been implemented in modern browsers, developers seldom pay attention to lightweight and practical APIs. This article will "expose" five APIs you don't know, and hope you can explore more HTML5 APIs to help you go further on this road.

Element. classlist

The classlist API provides a CSS controller, which was previously implemented through 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"); 

 

The biggest advantage of this API is simplicity and intelligence. Read this article to learn more about classlist attributes.

Contextmenu API

Contextmenu API is an excellent menu API. You can add items to the browser menu without rewriting the context menu of the browser, which is very simple and convenient.

 

<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> 

 

Note: It is best to use JavaScript to create a menu tag. Because the item action is still executed by JavaScript, it is useless to leave a menu that cannot be executed if Javascript is disabled.

Element. Dataset

Dataset APIs help developers easily get or set data attribute values:

 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>   

 

It is as simple and effective as classlist.

Window. postmessage API

IE8 has started to support the postmessage API for a long time. It allows messages to be sent between windows and 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 ]);  

 

Messages can only be strings. JSON. stringify and JSON. parse can be used to parse more meaningful data.

Autofocus attribute

When the page is complete, the autofocus attribute helps a given button, input, or textarea element automatically obtain the focus.

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

 

Each browser supports different APIs, so please carefully read the instructions before using them, hoping to help you better use the APIs. (Compilation/Zhang hongyue English Source: David Walsh blog)