当人们看到或者说出"HTML5"这个词的时候，估计至少有一半以上的人，会联想到她既是一个性感而又充满魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？

我们注意到那些基础的Api停滞发展了如此漫长的时间(大概是1999-2009)，以至于像"placeholder"这样基础的一个附加功能，也要花费我们不短的时间来处理。

尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API。

本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还不广为人知的API。

Element.classList

这个属性已经发布了好几年，通过classList,我们可以通过JavaScript来操纵底层css的class属性.

代码如下:

// 使用classList属性(Dom元素,css类名)

function toggleClassList(element,cName){

// 1. classList API

// 切换类,有则移除，没有则添加

if(element.classList.toggle){

element.classList.toggle(cName);

return true;

}

// !!! 其实，本函数 toggleClassList 如果支持的话，

// 那么下面的代码就不会被执行，此处仅作演示,请灵活应用

// 2. classList API

// element 的class属性是否包含 hide 这个CSS类

var hasHide = element.classList.contains(cName);

//

if(hasHide){

// 3. classList API

// 移除hide类

element.classList.remove(cName);

} else {

// 4. classList API

// 添加hide类

element.classList.add(cName);

}

return true;

};

ContextMenu API

经测试chrome28不管用。。。

新的API，ContextMenu 是极好的接口： 此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单)，而不是去覆盖浏览器的默认右键菜单。

需要注意的是，你最好采用js脚本来动态的创建菜单contextmenu，这样可以避免页面禁用JS脚本的情况 下出现多余的HTML代码。

代码如下:

Element.dataset

数据集(dataset) API 允许开发者对DOM元素设置(set)和获取(get) 以 data- 前缀开头的属性值。

代码如下:

代码如下:

function testDataset(){

//

var intro = document.getElementById("intro");

// 注意这个不是 id属性哦，是 data-id 的值

var id = intro.dataset.id;

// data-website

var website = intro.dataset.website;

// data-blog-url,驼峰命名法..

var blogUrl = intro.dataset.blogUrl;

// data-my-name

var myName = intro.dataset.myName;

//

var msg = "qq:"+id

+",website:"+website

+",blogUrl:"+blogUrl

+",myName:"+myName

;

//

warn(msg);

};

没有什么好说的，和classList一样，简单却实用。(想一想，是否改变了后台和前台JS的某些交互以及解耦？)

window.postMessage API

IE8 已经支持 postMessage API 好几年了，此API允许window 和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!");

}

]);

// message 只允许string 类型的数据，然而您可以使用 JSON.stringify 以及 JSON.parse 传递更多有意义的消息。

autofocus Attribute

autofocus 属性确保当页面加载后，给定的 BUTTON,INPUT或者 TEXTAREA 元素能够自动获得焦点。

代码如下:

Hi!

autofocus 属性主要用在简单的输入页面，详情请参考：autofocus 属性

各浏览器厂商对这些API的支持度各不相同，所以在使用之前最好检测一下兼容性，花一些时间来阅读上面所列出的API，您将会对他们了解和掌握更多。

部分的测试代码如下：

代码如下: