5 HTML5 APIs You Didn’t Know Existed

When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature addition like placeholder made us "take a minute."  Despite many HTML5 features being implemented in modern browsers, many developers are unaware of some of the smaller, useful APIs available to us.  This post exposes those APIs and was written to encourage you to explore the lessor known HTML5 APIs!

Element.classList

The classList API provides the basic CSS controls our JavaScript libraries have been giving us for years:

// 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 epitome of a great API addition: simple and intelligent. Read this post to learn about a few other classList properties.

ContextMenu API

The new ContextMenu API is excellent:  instead of overriding the browser context menu, the new ContextMenu API allows you to simply add items to the browser's context menu:

<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 that it's best to create your menu markup with JavaScript since JS is required to make item actions work, and you wouldn't want the HTML in the page if JS is turned off.

Element.dataset

The dataset API allows developers to get and 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>  

Not much more to say; just like classList, simple and effective.

window.postMessage API

The postMessage API, which has even been supported in IE8 for years, allows for message sending between windows and IFRAME elements:

// 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 == "https://davidwalsh.name") {
		// Log out the message
		console.log(event.data);

		// Send a message back
		event.source.postMessage("Hello back!");
	}
]);

Messages may only be strings, but you could always use JSON.stringify and JSON.parse for more meaningful data!

autofocus Attribute

The autofocus attribute ensures that a given BUTTON, INPUT, or TEXTAREA element is focused on when the page is ready:

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

Admittedly the autofocus attribute is disorienting for the visually impaired, but on simple search pages, it's the perfect addition.

Browser support for each API differs, so use feature detection before using each API.  Take a few moments to read the detailed posts on each feature above -- you'll learn a lot and hopefully get a chance to tinker with each API!