Element.classList
我来告诉你个好消息。HTML5版网站设计里有个叫“元素的类列表”（Element.classList）的新功能，你现在不用再费劲地编写复杂代码或者找寻JavaScript库！直接运用它就可以轻松修改元素的类别，随时改变页面的样貌。而且更厉害的是，这个方法还有很多小妙招，像随心所欲地控制网页样式之类的酷炫功能也都能实现！
ContextMenu API
你听说过浏览器的右键菜单吗？就像我们日常使用那样，它其实也是可以添加东西的。有一种名为ContextMenu API的API就能做到这点。简单的说就是用JavaScript写些代码就能轻松地定制我们想要的右键菜单，不光替换原有的那个，想怎么搞就怎么搞。好处还有很多，比如说提升用户体验，增加网页的互动性等等。但是别忘了，当用户关闭JavaScript后，这些自定义菜单就没办法显示出来了，所以我们要在设计菜单时要考虑到这一点。记住，设身处地为用户着想才能让他们满意
XML/HTML Code复制内容到剪贴板 // 增加一个CSS类 myElement.classList.add("newClass"); // 删除一个CSS类 myElement.classList.remove("existingClass"); // 检查是否拥有一个CSS类 myElement.classList.contains("oneClass"); // 反转一个CSS类的有无 myElement.classList.toggle("anotherClass");
Element.dataset
HTML5给大家带来了datasets API，这玩意儿能让你轻轻松松地设定元素的data-*属性。就像用classList一样，简单、直接。有了它，设置元素数据变得很容易了。还有，利用这个API，我们可以直观地看到元素里存着什么数据，想怎么处理就怎么处理。而且，用它还可以实现各种有意思的网页互动！
window.postMessage API
XML/HTML Code复制内容到剪贴板
知道那个叫 window.postMessage 的东西吗?可能你听都没听说过，但是别担心这可是 HTML5 里面的一大神器。简单说就是能帮助咱们在不同的网页甚至 iframe 间快速传递信息，简直太方便了!对我们这些做前端的人来说，简直就是救星！而且不仅仅是这样，就连老掉牙的 IE8 都能用它来解决以前跨窗口交流的难题。打包消息的时候注意别忘记输入字符串类型哈~如果想要消息看起来更清晰明了，我们还可以利用 JS 中的 JSON.stringify 和 JSON.parse 这俩函数！
autofocus属性
XML/HTML Code复制内容到剪贴板
/* 以下面的代码为例
*/
// 获取元素
var element = document.getElementById("myp");
// 获取id
var id = element.dataset.id;
// 读取 "data-my-custom-key" 的值
var customKey = element.dataset.myCustomKey;
// 修改成其它值
element.dataset.myCustomKey = "Some other value";
// 结果是：
//
说到 HTML5，别忘了 Autofocus，它就像个魔法一样，在我们刚进入页面时，会自动把焦点放在那些让你输入东西的地方，例如登录框或者搜索栏。这个功能让所有人在浏览网页感觉方便很多，特别是那些经常要上下翻页或者打字的时候，效果最显著。看过 Google 这类大搜索网站就知道，他们的界面和交互方式几乎没变，有了 Autofocus，浏览起来就轻松多了，还能帮你省不少力！
总结
咱们别磨蹭，HTML5可是做网站前端超棒的技术!这项技术一直在升级喔，加了不少好用的功能和API。你可能还不知道，有好多新特性超级实用滴，还有很多潜能等你去发掘。只要学好了如何运用这些HTML5的新玩意儿，网页速度刷刷的，颜值也是直线上升，说不定还能玩出更多新花样！
JavaScript Code复制内容到剪贴板
// 从A域上的窗口或iframe，发送一条信息到B域中的窗口或ifame
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("来自第一个窗口的问候!");
// 在第二个不同域上的窗口或iframe接收消息
window.addEventListener("message", function(event) {
// 检验域的合法性
if(event.origin == "http://www.webhek.com") {
// 输出日志信息
console.log(event.data);
// 反馈消息
event.source.postMessage("你也好吗!");
}
]);
别紧张，担心啥呢 HTML5新玩意挺有意思的，多学学资料实践下即可。实操过程中可能有更多快乐等你！学习新事物关键得懂操作，工作时勇敢尝试新技巧，不仅技能升级，连前端思维也能变得更宽广
看完这篇文章后，你们是不是已经清楚了HTML5那些可能之前不知道的新功能？赶快用起来，你做的网页应用就会更酷炫
XML/HTML Code复制内容到剪贴板
。
评论0