你不知道的5个HTML5 API

摘要：毫无疑问，HTML5已经成为当今最流行的一门技术，尤其是Web开发者们对HTML5的兴趣是日趋浓厚。HTML5的许多功能都也能在现代浏览器中得以实现。然而，作为开发者，除了关注HTML5的功能和开发工具外，你有对其API留意过吗？本文将为你提供5个你所不知道的API，助你在HTML5开发这条路上走的更远。
一提到HTML5，你脑海里是不是闪现这样的画面：“一大堆脱衣舞女和独角兽走进房间，然后演奏着 I’m Sexy and I know IT”。产生这样的想法难道是我们的错吗？API的停滞不前，使一些基本的特性，例如使用“占位符”都需要“花一分钟”。尽管HTML5的许多功能都已经在现代浏览器中实现，但开发者却很少关注那些轻量且非常实用的API。本文就将为您“曝光”5个你所不知道的API，并且希望你能探索出更多的HTML5 API，助你在这条路上走的更远。

Element.classList

classList API提供了一个CSS控制器，而这功能以前都是通过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");
该API最大的优点是：简单和智能，阅读这篇文章了解更多的classList属性。

ContextMenu API

ContextMenu API是一个非常出色的菜单API，无需重写浏览器上下文菜单即可把item添加到浏览器菜单中，非常简单、方便。

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>
备注：最好使用JavaScript创建菜单标记，因为item的动作还是由JavaScript执行，如果JavaScript被关闭那么留一个不能执行的菜单也没用。

Element.dataset

dataset这个API可以帮助开发人员轻松获取(get)或设置(set)数据属性值：

/*  Assuming element: 
 
  p id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"> /p>
 
*/ 
 
// 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: 
  //    p id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"> /p>   
无需多说，和classList一样，简单有效。

window.postMessage API

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 == "http://davidwalsh.name") {  
    // LOG out the message 
    console.log(event.data);  
 
    // Send a message back 
    event.source.postMessage("Hello back!");  
  }  
]);  
消息只能是字符串类型，使用JSON.stringify和JSON.parse可以解析更多有意义的数据。

autofocus Attribute

当页面完成时，autofocus（自动对焦）属性可以帮助一个给定的Button、Input或TextArea元素自动获取焦点。

input autofocus="autofocus" />
button autofocus="autofocus"> Hi!/button>
textarea autofocus="autofocus"> /textarea>
每个浏览器会支持不同的API，所以在使用之前请认真阅读使用说明，希望能帮助你更好的使用API。

摘要：毫无疑问，HTML5已经成为当今最流行的一门技术，尤其是Web开发者们对HTML5的兴趣是日趋浓厚。HTML5的许多功能都也能在现代浏览器中得以实现。然而，作为开发者，除了关注HTML5的功能和开发工具外，你有对其API留意过吗？本文将为你提供5个你所不知道的API，助你在HTML5开发这条路上走的更远。
一提到HTML5，你脑海里是不是闪现这样的画面：“一大堆脱衣舞女和独角兽走进房间，然后演奏着 I’m Sexy and I know it”。产生这样的想法难道是我们的错吗？API的停滞不前，使一些基本的特性，例如使用“占位符”都需要“花一分钟”。尽管HTML5的许多功能都已经在现代浏览器中实现，但开发者却很少关注那些轻量且非常实用的API。本文就将为您“曝光”5个你所不知道的API，并且希望你能探索出更多的HTML5 API，助你在这条路上走的更远。

Element.classList

classList API提供了一个CSS控制器，而这功能以前都是通过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");
该API最大的优点是：简单和智能，阅读这篇文章了解更多的classList属性。

ContextMenu API

ContextMenu API是一个非常出色的菜单API，无需重写浏览器上下文菜单即可把item添加到浏览器菜单中，非常简单、方便。

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>
备注：最好使用JavaScript创建菜单标记，因为item的动作还是由JavaScript执行，如果JavaScript被关闭那么留一个不能执行的菜单也没用。

Element.dataset

dataset这个API可以帮助开发人员轻松获取(get)或设置(set)数据属性值：

/*  Assuming element: 
 
  p id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"> /p>
 
*/ 
 
// 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: 
  //    p id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"> /p>   
无需多说，和classList一样，简单有效。

window.postMessage API

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 == "http://davidwalsh.name") {  
    // Log out the message 
    console.log(event.data);  
 
    // Send a message back 
    event.source.postMessage("Hello back!");  
  }  
]);  
消息只能是字符串类型，使用JSON.stringify和JSON.parse可以解析更多有意义的数据。

autofocus Attribute

当页面完成时，autofocus（自动对焦）属性可以帮助一个给定的Button、Input或TextArea元素自动获取焦点。

input autofocus="autofocus" />
button autofocus="autofocus"> Hi!/button>
textarea autofocus="autofocus"> /textarea>
每个浏览器会支持不同的API，所以在使用之前请认真阅读使用说明，希望能帮助你更好的使用API。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！