5 new features in HTML5 you didn't know about

This article mainly introduces some new HTML5 features that you don’t know in detail, and shares with you more unknown HTML5 API, interested friends can refer to it

When you talk about "HTML5" in the crowd, you may feel like an exotic dancer or unicorn, coming to the middle of the room , with a distinct “I’m cool, I know it” undertone. This cannot be said to be vain. For many years, the basic HTML API has not developed at all, so that when a small new feature appears, such as placeholder, it will make us look novel. Although many HTML5 features are implemented in modern browsers, most programmers still don't know or have never heard of some small, very useful APIs. In this article I will introduce some such APIs and welcome everyone to discover more unknown HTML5 APIs!

Element.classList

The classList API provides the basic functionality of controlling CSS that we have implemented for many years using a JavaScript tool library:

XML/HTML Code复制内容到剪贴板
// 增加一个CSS类   
myElement.classList.add("newClass");   
  
// 删除一个CSS类   
myElement.classList.remove("existingClass");   
  
// 检查是否拥有一个CSS类   
myElement.classList.contains("oneClass");   
  
// 反转一个CSS类的有无   
myElement.classList.toggle("anotherClass");

• 
  

#The main value of this emerging API The embodiment is: simple and practical. Read this article, which introduces several other classList features.

ContextMenu API

This new ContextMenu API is very useful: it does not replace the original right-click menu, but adds your custom right-click menu Go to the browser's right-click menu:

XML/HTML Code复制内容到剪贴板
<section contextmenu="mymenu">  
  
  <!-- 添加菜单 -->  
  <menu type="context" id="mymenu">  
   <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>  
   <menu label="Share on..." icon="/images/share_icon.gif">  
     <menuitem label="Twitter" icon="/images/twitter_icon.gif" 
     onclick="goTo(&#39;//twitter.com/intent/tweet?text=&#39; + document.title + &#39;:  &#39; + window.location.href);"></menuitem>  
     <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" 
     onclick="goTo(&#39;//facebook.com/sharer/sharer.php?u=&#39; + window.location.href);"></menuitem>  
   </menu>  
 </menu>  
</section>

• 
  

##It should be noted that it is best to use JavaScript to dynamically create these menu codes, because the menu event will eventually call JavaScript to perform the task. If the user disables JavaScript, the right-click menu will not be generated, and he will not generate it at the same time. You will see a menu.

Element.dataset

Using the dataset API, programmers can easily get or set data-*Custom

Attributes

:

XML/HTML Code复制内容到剪贴板
/*  以下面的代码为例   
  
 <p id="myp" data-name="myp" data-id="myId" data-my-custom-key="This is the value"></p>  
  
*/   
  
// 获取元素   
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";   
  
 // 结果是：   
 //    <p id="myp" data-name="myp" data-id="myId" data-my-custom-key="Some other value"></p>

• 
  

#No need to say more, just follow Like classList, simple and practical

window.postMessage API

Even IE8 has supported postMessage API for many years. The function of postMessage API is to allow you to browse between two browsers. Pass information data between browser windows or iframes:

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("你也好吗!");   
 }   
]);

• 
  

##The message body can only be

string
, but you can use

JSON

.stringify and JSON.parse to convert the message into a more meaningful data body! autofocus attribute

The autofocus attribute allows the BUTTON, INPUT, or TEXTAREA element to automatically become the page focus when the page is loaded:

XML/HTML Code复制内容到剪贴板
<input autofocus="autofocus" />  
<button autofocus="autofocus">Hi!</button>  
<textarea autofocus="autofocus"></textarea>

• 
  


# has a fixed pattern like the Google search page Where, the autofocus attribute is the most desirable feature.

Browser support for each API is slightly different, so check the support for these features before using it. Take some time to read the detailed description of each API, I believe you will find more.

The above is the detailed content of 5 new features in HTML5 you didn't know about. For more information, please follow other related articles on the PHP Chinese website!