5 simple and practical APIs in HTML5

Author：Eve Cole Update Time：2025-08-08 14:48:02

Comment: When you talk about "HTML5" in the crowd, you may feel like an exotic dancer or unicorn coming to the middle of the house with a clear meaning of "I'm cool, I know it"

This cannot be said that we are vain. The basic HTML API has not developed in the past few years, so that when a small new feature appears, such as placeholder, it will give us a novel look. Although many HTML5 features are implemented in new 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 a basic function of controlling CSS that we have implemented over the years using the JavaScript tool library:

// Add a CSS class

myElement.classList.add("newClass");

// Delete a CSS class

myElement.classList.remove("existingClass");

// Check whether you have a CSS class

myElement.classList.contains("oneClass");

// Reverse the existence or not of a CSS class

myElement.classList.toggle("anotherClass");

The main value of this newly emerging 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 right-click menu in the browser:

</menu>

</section>

It should be noted that it is best to use JavaScript to create these menu codes dynamically, because the menu event will eventually call JavaScript to execute tasks. If the user prohibits 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 obtain or set data-* custom properties:

/* The following code is an example

// Get elements

var element = document.getElementById("myDiv");

// Get id

var id = element.dataset.id;

// Read the value of "data-my-custom-key"

var customKey = element.dataset.myCustomKey;

// Modify to other values

element.dataset.myCustomKey = "Some other value";

// turn out:

// <div data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

Needless to say, it is as simple and practical as classList

window.postMessage API

Even IE8 has supported the postMessage API for many years. The function of the postMessage API is that it allows you to pass information data between two browser windows or iframes:

// From a window or iframe on domain A, send a message to a window or ifame in domain B.

var iframeWindow = document.getElementById("iframe").contentWindow;

iframeWindow.postMessage("Greetings from the first window!");</p><p>// Receive messages in a window or iframe on a second different domain

window.addEventListener("message", function(event) {

// Test the legality of the domain

if(event.origin == "http://www.vevb.com") {

// Output log information

console.log(event.data);

// Feedback message

event.source.postMessage("How are you okay!");

}

]);

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

autofocus attribute

The autofocus attribute can make BUTTON, INPUT, or TEXTAREA elements automatically become the focus of the page when the page is loaded:

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

The browser supports each API slightly differently, so check the support for these features before using them. Take some time to read the detailed description of each API, and I believe you will find more.