Five HTML5 APIs you don't know

Abstract: There is no doubt that HTML5 has become one of the most popular technologies today, especially for Web developers who are increasingly interested in HTML5. Many HTML5 functions can also be implemented in modern browsers. However, as a developer, do you pay attention to HTML5 functions and development tools? This article will provide you with five APIs you don't know, helping you go further on the HTML5 development path.
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:

// Add a class to an element
MyElement. classList. add ("newClass ");
 
// Remove a class to an element
MyElement. classList. remove ("existingClass ");
 
// Check for existence
MyElement. classList. contains ("oneClass ");
 
// Toggle a class
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/pai_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:

/* Assuming element:
 
<Div id = "myDiv" data-name = "myDiv" data-id = "myId" data-my-custom-key = "This is the value"> </div>
 
*/
 
// Get the element
Var element = document. getElementById ("myDiv ");
 
// Get the id
Var id = element. dataset. id;
 
// Retrieves "data-my-custom-key"
Var customKey = element. dataset. myCustomKey;
 
// Sets the value to something else
Element. dataset. myCustomKey = "Some other value ";
 
// Element becomes:
// <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:

// From window or frame on domain 1, send a message to the iframe which hosts another domain
Var iframeWindow = document. getElementById ("iframe"). contentWindow;
IframeWindow. postMessage ("Hello from the first window! ");
 
// From inside the iframe on different host, receive message
Window. addEventListener ("message", function (event ){
// Make sure we trust the sending domain
If (event. origin = "http://davidwalsh.name "){
// Log out the message
Console. log (event. data );
 
// Send a message back
Event. source. postMessage ("Hello back! ");
}
]);
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.

<Input autofocus = "autofocus"/>
<Button autofocus = "autofocus"> Hi! </Button>
<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.