html 5 api_5个您不知道HTML5 API

html 5 api

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!

当您说或阅读“ HTML5”时，您会一半期望异国情调的舞者和独角兽走进房间，听着“我很性感，我知道”的曲调。 你能怪我们吗？ 我们看到基本的API停滞了很长时间，以至于诸如占位符之类的基本功能使我们“花了一分钟”。 尽管现代浏览器中实现了许多HTML5功能，但许多开发人员并未意识到我们可以使用的一些更小，更有用的API。 这篇文章揭露了这些API，旨在鼓励您探索众所周知HTML5 API！

Element.classList (Element.classList)

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

classList API提供了我们JavaScript库多年来为我们提供的基本CSS控件：

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

大量API的缩影：简单而智能。 阅读这篇文章，以了解其他一些classList属性。

ContextMenu API (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:

新的ContextMenu API非常出色：新的ContextMenu API不会覆盖浏览器的上下文菜单，而是允许您简单地将项目添加到浏览器的上下文菜单中：

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

请注意，最好使用JavaScript创建菜单标记，因为必须使用JS才能使项目操作生效，并且如果JS处于关闭状态，则您不希望页面中HTML。

元素数据集 (Element.dataset)

The dataset API allows developers to get and set data- attribute values:

数据集API允许开发人员获取和设置data-属性值：

/*  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.

没有更多的话要说。 就像classList一样，简单有效。

window.postMessage API (window.postMessage API)

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

甚至在IE8中也已经支持多年的postMessage API ，它允许在Windows和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 == "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!

消息可能只是字符串，但您始终可以使用JSON.stringify和JSON.parse获得更有意义的数据！

自动对焦属性 (autofocus Attribute)

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

autofocus属性可确保在页面准备就绪时将焦点放在给定的BUTTON ， INPUT或TEXTAREA元素上：

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

浏览器对每个API的支持各不相同，因此请在使用每个API之前使用功能检测。 花点时间阅读上面每个功能的详细文章-您将学到很多东西，并希望有机会尝试修改每个API！

翻译自: https://davidwalsh.name/html5-apis

html 5 api