html5技术介绍,Html接口
原文地址：5个你不知道存在的HTML5 APIs
原文：2010年9月27日
翻译日期：2013年8月7日
当人们看到或者说出‘html 5’这个词的时候，估计至少有一半以上的人会把她想成一个性感迷人的美女，一个只会把你搞得一团糟的独角兽。这能怪我们开发商吗？
我们已经注意到那些基本的API已经停滞了如此长的时间(大约1999-2009年)，以至于像‘占位符’这样的基础的附加功能将会花费我们很长的时间来处理。
虽然目前的主流浏览器已经实现了HTML5的很多新特性，但是很多开发者根本没有注意到这些更简单更有用的API。
本系列文章介绍了这些接口API，并希望鼓励更多的开发者去探索那些不广为人知的API。
Element.classList
这个属性已经发布好几年了，通过classList，我们可以通过JavaScript操纵底层css的class属性。
代码如下：复制代码。代码如下：
//使用classList属性(Dom元素，css类名)
函数toggleClassList(element，cName){
//1.类别列表API
//切换类，有则移除，无则添加。
if(element.classList.toggle){
element . class list . toggle(cName)；
返回true
}
//!实际上，如果支持的话，
//那么下面的代码就不会执行了。这只是一个演示。请灵活运用。
//2.类别列表API
//元素的class属性是否包含CSS类hide？
var hasHide=element . class list . contains(cName)；
//
如果(哈希德){
//3.类别列表API
//删除隐藏类
element . class list . remove(cName)；
}否则{
//4.类别列表API
//添加隐藏类
element . class list . add(cName)；
}
返回true
};
上下文菜单API
Chrome28测试后不工作。
新的API context menu是一个优秀的接口：这个接口允许您简单地将菜单项添加到浏览器的上下文菜单(右键菜单)中，而不是覆盖浏览器的默认右键菜单。
需要注意的是，你最好使用js脚本动态创建菜单contextmenu，避免页面禁用JS脚本时出现多余的HTML代码。
代码如下：复制代码。代码如下：
div class=隐藏
！- contextmenu指定要使用的上下文菜单。-
！- !不知道为什么，我浏览器上的这个配置不行。-
section context menu= my menu style= min-height:100px；最小高度：200px背景：# 999；
h1单击此区域查看菜单/h1
！-
为了代码结构的清晰，将menu元素放在要使用的元素内。事实上，你也可以把它放在外面的任何地方：
-
！-添加菜单。至于图片图标，请自行设置。添加菜单-
菜单类型=上下文 id=我的菜单
menuitem label= refresh page onclick= window . location . reload()；icon= http://mat 1 . gt img . com/app/opent/images/wiki/resource/weiboicon 32 . png /menuitem
Menu=共享到.图标= 3358www.sinaimg.cn/blog/developer/wiki/32x32.png
Menuitem label=新浪微博 icon= http://www.sinaimg.cn/blog/developer/wiki/32x32.png onclick= window . location . href= 3358 www . Weibo . com /menuitem
Menuitem label=腾讯微博 icon= http://mat1.gtimg.com/app/opent/images/wiki/Resource/Weibo icon 32 . png onclick= window . location . href= 3358t . QQ . com /menuitem/menuitem
/菜单
/菜单
/部分
/div
元素.数据集
Dataset) API允许开发人员在DOM元素上以数据前缀开始设置和获取属性值。
代码如下：复制代码。代码如下：
div id= intro data-website= www . csdn . net data-id= 551996458 data-my-name= iron anchor data-blog-URL= 3358blog.csdn.net/renfufei/div将代码复制如下：
函数testDataset(){
//
var intro=document . getelementbyid( intro )；
//注意，这不是id属性，而是data-id的值
var id=intro . dataset . id；
//数据-网站
var website=intro . dataset . website；
//数据-博客-网址，驼峰命名.
var blog URL=intro . dataset . blog URL；
//数据-我的名字
var myName=intro。数据集。我的名字；
//
var msg=qq: id
,网站：网站
,布洛格尔："布洛格尔
,我的名字：我的名字
；
//
warn(msg)；
};
没有什么好说的，和优等生名单一样，简单却实用。(想一想，是否改变了后台和前台射流研究…的某些交互以及解耦？)
window.postMessage API
IE8已经支持邮件后应用程序接口好几年了，此应用程序接口允许窗户和内联框架元素之间互相传递消息。
跨域支持哦。代码如下：复制代码代码如下：
//从域一上的窗口或框架向承载另一个域的内联框架发送消息
var iframe window=文档。getelementbyid( iframe ).内容窗口；
iframeWindow.postMessage(第一个窗口的你好!);
//从不同主机上的内联框架内部接收消息
窗户。addevent侦听器(消息，函数(事件){
//确保我们信任发送域
如果(事件。产地== http://大卫沃尔什。姓名){
//注销消息
控制台。日志(事件。数据)；
//发回一条消息
event.source.postMessage(你好，回来!);
}
]);
//消息只允许线类型的数据，然而您可以使用JSON.stringify以及JSON.parse传递更多有意义的消息。
自动聚焦属性
自（动)调焦装置属性确保当页面加载后，给定的输入按钮或者文本区域元素能够自动获得焦点。复制代码代码如下：
输入自动对焦=自动对焦/
按钮自动对焦=自动对焦嗨！/按钮
textarea自动聚焦=自动聚焦/textarea
自（动)调焦装置属性主要用在简单的输入页面，详情请参考：自动对焦属性
各浏览器厂商对这些应用程序接口的支持度各不相同，所以在使用之前最好检测一下兼容性，花一些时间来阅读上面所列出的API，您将会对他们了解和掌握更多。
部分的测试代码如下：复制代码代码如下：
！声明文档类型
超文本标记语言
头
标题5个你不知道的HTML5 API接口演示/标题
meta name= Generator content= edit plus
meta name= Author content= renfufei @ QQ。 com
meta name= Description content= original=http://David Walsh。名称/html 5-API
风格。隐藏{显示：无}。poplayer { z指数：999;位置：绝对；背景色：# ffftop:0px；左：0px溢出：隐藏；宽度：100%;身高：100%;不透明度：1;}。关闭{ top:3px；右：10px位置：绝对；}
/风格
脚本
//显示警告信息
功能警告（消息){
warn=warn 一个未知警告！
if(window.console){
控制台。warn(msg)；
}否则{
警报（消息);
}
};
//使用优等生名单属性(Dom元素，css类名)
函数toggleClassList(element，cName){
//1.类别列表应用程序接口
//切换类，有则移除，没有则添加
if(element.classList.toggle){
元素。班级名单。toggle(cName)；
返回真实的
}
//!其实，本函数toggleClassList如果支持的话，
//那么下面的代码就不会被执行，此处仅作演示，请灵活应用
//2.类别列表应用程序接口
//元素的班级属性是否包含隐藏这个半铸钢钢性铸铁(铸造半钢)类
var hasHide=element。班级名单。包含(cName)；
//
如果（哈希德){
//3.类别列表应用程序接口
//移除隐藏类
元素。班级名单。删除(cName)；
}否则{
//4.类别列表应用程序接口
//添加隐藏类
元素。班级名单。添加(cName)；
}
返回真实的
};
//使用类名属性(Dom元素，css类名)
函数toggleClassName(element，cName){
var class name=element。类名 “”；
//去掉首尾的空白
cname=cname.replace(/^\s*\s*$/g,)；
//cName中间如果含有空白字符，则失败。如果要好好处理，可以拆分为数组，单个处理
var blank reg=/\ s/；
if(blankReg.test(cName)){
警告(“cName”)中间含有空白字符);
返回错误的
}
//正则，\b表示可见连续字符的边界，可以这么理解：
//hide2 hide hide myname 那么，
//hide2的前后各有一个虚拟的\b，隐藏前后也有，
//但是你好和需要(需求的缩写)之间则没有。
//g表示单行全局
//var rep=/\ b hide \ b/g；
var rep=new RegExp( \ \ b cName \ \ b ， g )；
如果(重复测试（类名)){
类名=类名。replace(rep， )；
}否则{
名称
}
//替换新类名。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。