5个你不知道的HTML5的接口介绍

1、5个你不知道的html5的接口介绍尽管当前的主流扫瞄器已经实现了无数的html5新特性，但是无数开发者根本就没注重到这些更简洁，也很实用的api，本系列文章介绍了这些接口api，同时也希翼能鼓舞更多开发者去探究那些还不广为人知的api原文地址：5个html5 api，您不知道的原文日期：2010年09月27日翻译日期：2013年8月7日当人们看到或者说出html5这个词的时候，估量起码有一半以上的人，会联想到她既是一共性感而又弥漫魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？我们注重到那些基础的阿比停滞进展了如此漫长的时光（也许是1999年至2009年），以至于像

2、占位符这样基础的一个附加功能，也要花费我们不短的时光来处理。尽管当前的主流扫瞄器已经实现了无数的html5新特性，但是无数开发者根本就没注重到这些更简洁，也很实用的api。本系列文章介绍这些接口api，同时也希翼能鼓舞更多开发者去探究那些还不广为人知的api。element.classlist这个属性已经发布了好几年，通过classlist，我们可以通过javascript来操纵折叠css的类属性。代码如下： 复制代码代码如下： / /用法classlist属性（dom元素，css类名）function toggleclasslist（element，cname）/ 1. classlist

3、api/切换类，有则可删除，没有则添加if（element.classlist.toggle）元素.classlist.toggle（cname）;返回true；/ ! 其实，本函数toggleclasslist假如支持的话，/那么下面的代码就不会被执行，此处唯一作演示，请灵活应用/ 2. classlist api/元素的类属性是否包含躲藏这个css类var hashide = element.classlist.contains（cname）;/ /if（hashide）/ 3. classlist api/可移除躲藏类element.classlist.remove（cname）; el

4、se / 4. classlist api/添加躲藏类element.classlist.add（cname）;返回true; 文本菜单api经测试chrome28不管用.新的api，文本菜单是极好的接口：此接口允许你很容易地添加菜单项到扫瞄器的上下文菜单（右键菜单），而不是去笼罩扫瞄器的默认右键菜单。需要注重的是，你最好采纳js脚原来动态的创建上下文菜单，这样可以避开页面替换js脚本的状况下浮现多余的html代码。代码如下： 复制代码代码如下： 点击此区域查看菜单 element.dataset数据集（数据集）api允许开发者对dom元素设置（集）和猎取（猎取）以data-开始开始的属性值。

5、代码如下： 复制代码代码如下： 复制代码代码如下： 函数testdataset（）/var intro = document.getelementbyid（ intro）;/注重这个不是id属性哦，是data-id的值var id = intro.dataset.id;/数据网站var website = intro.dataset.website;/ data-blog-url，驼峰命名法.var blogurl = intro.dataset.blogurl;/ data-my-namevar myname = intro.dataset.myname;/var msg = qq： + i

6、d+，网站： +网站+，blogurl： + blogurl+，myname： + myname;/warn（msg）; 没有什么好说的，和年级列表一样，容易却有用。（想一想，是否转变了后台和前台js的某些交互以及解耦？）window.postmessage apiie8已经支持的postmessage api好几年了，此api允许window和iframe元素之间相互传递消息。跨域支持哦。代码如下： 复制代码代码如下： /从域1上的窗口或框架发送消息到承载另一个域的iframevar iframewindow = document.getelementbyid（ iframe）。conten

7、twindow;iframewindow.postmessage（您好，第一个窗口！）;/从不同主机上的iframe内部，接收消息window.addeventlistener（ message，function（event）/确保我们相信发送域if（event.origin = ）/注销消息console.log（event.data）;/发回一条消息event.source.postmessage（ hello back！）;）;/消息只允许字符串类型的数据，而您可以用法json.stringify以及json.parse传递更多累积的消息。 a

8、utofocus属性autofocus属性确保当页面加载后，给定的button，input或者textarea元素能够自动获得焦点。 复制代码代码如下： 嗨！ autofocus属性主要用在容易的输入页面，细节请参考：autofocus属性各扫瞄器厂商对这些api的支持度各不相同，所以在用法之前最好检测一下兼容性，花一些时光来阅读上面所列出的的api，您将会对他们了解和把握更多。部分的测试代码如下： 复制代码代码如下： 5个你不知道的html5 api接口演示 .hide display：none.poplayer z-index： 999; 位置：肯定；背景色彩：fff; top：0px;

9、left：0px;溢出：躲藏；宽度：100；高度：100；不透亮度：1;.close 顶部：3px; right：10px; position：absolute;/显示警告信息功能warn（msg）warn = warn | 一个未知警告！;假如（窗口控制台） console.warn（msg）;其他alert（msg）;/ /用法classlist属性（dom元素，css类名）function toggleclasslist（element，cname）/ 1. classlist api/切换类，有则可删除，没有则添加if（element.classlist.toggle）元素.class

10、list.toggle（cname）;返回true；/ ! 其实，本函数toggleclasslist假如支持的话，/那么下面的代码就不会被执行，此处唯一作演示，请灵活应用/ 2. classlist api/元素的类属性是否包含躲藏这个css类var hashide = element.classlist.contains（cname）;/ /if（hashide）/ 3. classlist api/可移除躲藏类element.classlist.remove（cname）; else / 4. classlist api/添加躲藏类element.classlist.add（cname）

11、;返回true;/用法classname属性（dom元素，css类名）function toggleclassname（element，cname）var classname = element.classname | ;/去掉首尾的空白cname = cname.replace（/ / s * | / s * $ / g，）;/ cname中间假如包含空白字符，则失败。假如要好益处理，可以分割为层叠，分开处理var blankreg = / s + /;if（blankreg.test（cname）warn（&39; + cname +&39;中间包含空白字符）;返回fals

12、e；/正则，/ b表示可见延续字符的边界，可以很理解：/ hide2 hide hide myname那么，/ hide2的前后各有一个虚拟的/ b，hide前后也有，/但是hi和。德之间则没有/克表示单行全局/变种代表= /拜德/ b / g的;var rep = new regexp（ / b + cname + / b， g）;假如（代表 else classname + = + cname;/替换新的classname。element.classname= classname;返回true；;/函数，切换（元素id，classname）函数toggleclass（elementid，c

13、name）/猎取一个dom元素var element = document.getelementbyid（elementid）;/假如不存在元素if（！element）warn（ id为 + elementid +的元素不存在）;返回false；if（！element.classlist）warn（ id为 + elementid +的元素不支持classlist属性，将用法其他手段来实现）；返回toggleclassname（element，cname）; else return toggleclasslist（element，cname）;函数testdataset（）/var intro

14、 = document.getelementbyid（ intro）;/注重这个不是id属性哦，是data-id的值var id = intro.dataset.id;/数据网站var website = intro.dataset.website;/ data-blog-url，驼峰命名法.var blogurl = intro.dataset.blogurl;/ data-my-namevar myname = intro.dataset.myname;/var msg = qq： + id+，网站： +网站+，blogurl： + blogurl+，myname： + myname;/warn（msg）;/ dom加载后执行window.addeventlistener（ domcontentloaded，function（）var open = document.getelementbyid（ open）;var close = document.getelementbyid（ close）;open.addeventlistene