五个很实用的HTML5接口

1.Element.classList

classList API为JS提供了基本的CSS控制方法，几个基本的方法如下。

// 元素新增新的class名
myElement.classList.add("newClass");

// 删除元素已有的某个class名
myElement.classList.remove("existingClass");

// 判断元素是否包含某个class名
myElement.classList.contains("oneClass");

// toggle方法
myElement.classList.toggle('myCssClass'); //没有则新增
myElement.classList.toggle('myCssClass'); //若存在则删除

关于更多的classList api可以到这篇文章了解。

2.ContextMenu API

ContextMenu API（自定义右键菜单接口）并不是重写浏览器的右键菜单，而是允许你为浏览器原有的菜单上新增一些新的内容。定义的方法如下：

<section contextmenu="mymenu">
<!-- 新增菜单 -->
<menu type="context" id="mymenu">
    <menuitem label="刷新本文" onclick="reload();" icon="xx.png"></menuitem>
    <menuitem label="马上评论" onclick="comment()" icon="xx.png"></menuitem>
</menu>
</section>

对应效果：

关于更多的ContextMenu api可以到这篇文章了解。

3.Element.dataset

dataset接口让开发者更方便地得到元素的属性值。

假如现在存在如下那样的div，里面自定义了属性

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

在HTML5中可以使用dataset接口进行操作：

//获取元素
var element = document.getElementById("myDiv");

//获取元素data-id的值
var id = element.dataset.id;

//获取元素自定义的长属性值data-my-custom-key，使用驼峰法
var customKey = element.dataset.myCustomKey;

//设置属性值
customKey = "This is the New Value";

关于更多的dataset api可以到这篇文章了解。

4.window.postMessage API

postMessage让windows和IFRAME元素之间进行通信。PS:这个接口其实已经被IE8支持了很多年了。

假如AA.COM页面IFRAME了一个BB.COM的页面。那么他们之间跨域的消息传递可以通过以下方法：

// AA.com的页面对象,给页面里面IFRAME的BB.COM页面传消息
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");

// IFRAME里的BB.COM接受到消息
window.addEventListener("message", function(event) {
  // 先确保来源网站是安全的
  if(event.origin == "http://AA.COM") {
    // 输出来自AA.COM的消息
    console.log(event.data);

    // 回复消息到AA.COM
    event.source.postMessage("Hello back!");
  }
]);

消息格式只能使用字符串哦。

关于更多的window.postMessage API可以到这篇文章了解。

5.自动聚焦属性(autofocus)

autofocus属性让BUTTON,INPUT,TEXTAREA找到了第二春，因为它们设置了这个属性，在页面加载时就能自动聚焦。

针对google,baidu和一些注册页面，autofocus是个好东西。

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

关于更多的autofocus API可以到这篇文章了解。

文章引自Nornor：http://nornor.net/5-html5-apis-you-dont-know.htm

英文原文：《5 HTML5 APIs You Didn’t Know Existed》