5 simple and practical APIs in HTML5_html5 tutorial skills-H5 Tutorial-php.cn

5 simple and practical APIs in HTML5_html5 tutorial skills

WBOY

Release： 2016-05-16 15:47:59

Original

1729 people have browsed it

This cannot be said to be vain of us. For many years, the basic HTML API has not developed at all, so that when a small new feature appears, such as placeholder, it will make us look novel. Although many HTML5 features are implemented in modern browsers, most programmers still don't know or have never heard of some small, very useful APIs. In this article I will introduce some such APIs and welcome everyone to discover more unknown HTML5 APIs!

Element.classList

The classList API provides the basic functionality of controlling CSS that we have implemented using JavaScript tool libraries for many years:

Copy code

The code is as follows:

// Add a CSS class
myElement.classList.add("newClass");
//Delete a CSS class
myElement. classList.remove("existingClass");
// Check whether there is a CSS class
myElement.classList.contains("oneClass");
// Invert the presence of a CSS class
myElement.classList.toggle("anotherClass");

The main value of this new API is: simple and practical.

ContextMenu API

This new ContextMenu API is very useful: it does not replace the original right-click menu, but adds your custom right-click menu to the browser's right-click menu:

Copy code

The code is as follows:

It should be noted that it is best to use JavaScript to dynamically create these menu codes, because menu events will ultimately call JavaScript to perform tasks. If the user disables JavaScript, the right-click menu will not be generated, and he will not see the menu at the same time. .

Element.dataset

Using the dataset API, programmers can easily get or set data-*custom attributes:

Copy code

The code is as follows:

/* Take the following code as an example

*/
// Get element
var element = document.getElementById("myDiv");
// Get id
var id = element.dataset.id;
// Read "data -my-custom-key" value
var customKey = element.dataset.myCustomKey;
// Modify to other value
element.dataset.myCustomKey = "Some other value";
// The result is:
//

No need to say more, just like classList, simple and practical

window.postMessage API

Even IE8 has supported postMessage API for many years. The function of postMessage API is to allow you to transfer information data between two browser windows or iframes:

Copy code

The code is as follows:

// From the window or iframe in domain A, send a message to the window or ifame in domain B
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Greetings from the first window!");

//Receive messages in a window or iframe on a second different domain
window.addEventListener("message", function(event) {
// Check the validity of the domain
if( event.origin == "http://www.jb51.net") {
// Output log information
console.log(event.data);
// Feedback message
event. source.postMessage("How are you too!");
}
]);

The message body can only be a string, but you can use JSON.stringify and JSON.parse to convert the message into a more meaningful data body!

autofocus attribute

The

autofocus attribute allows the BUTTON, INPUT, or TEXTAREA element to automatically become the page focus when the page is loaded:

Copy code

The code is as follows:

< ;textarea autofocus="autofocus">

In places with fixed patterns like Google search pages, the autofocus attribute is the most ideal feature.

Browser support for each API is slightly different, so check the support for these features before using it. Take some time to read the detailed description of each API, I believe you will find more.