5 HTML5 new features you don't know, but HTML5 New Features

5 HTML5 new features you don't know, but HTML5 New Features

When you talk about HTML5 in the crowd, you may feel like a foreign dancer or unicorn coming to the center of the room with the obvious "I'm cool, I know what it means. This is not to say that we are vanity. Over the years, basic HTML APIs have not been developed, so that when there is a small new function, such as placeholder, it will make us look new. Although many HTML5 features are implemented in the new browser, most programmers still do not know or have never heard of small and useful APIs. In this article, I will introduce some of these APIs and welcome you to discover more unknown HTML5 APIs!

Element. classList

The classList API provides a basic function for controlling CSS using the JavaScript tool library over the years:

Copy XML/HTML Code to clipboard

1. // Add a CSS class
2. MyElement. classList. add ("newClass ");
4. // Delete a CSS class
5. MyElement. classList. remove ("existingClass ");
7. // Check whether a CSS class exists
8. MyElement. classList. contains ("oneClass ");
10. // Reverse the occurrence of a CSS class
11. MyElement. classList. toggle ("anotherClass ");

The main value of this new API is simple and practical. Read this article to introduce the features of several other classList functions.

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 to the right-click menu of the browser:

Copy XML/HTML Code to clipboard

1. <Section contextmenu = "mymenu">
3. <! -- Add menu -->
4. <Menu type = "context" id = "mymenu">
5. <Menuitem label = "Refresh Post" onclick = "window. location. reload ();" icon = "/images/refresh-icon.png"> </menuitem>
6. <Menu label = "Share on..." icon = "/images/pai_icon.gif">
7. <Menuitem label = "Twitter" icon = "/images/twitter_icon.gif" onclick = "goTo ('// twitter.com/intent/tweet? Text = '+ document. title +': '+ window. location. href); "> </menuitem>
8. <Menuitem label = "Facebook" icon = "/images/facebook_icon16x16.gif" onclick = "goTo ('// facebook.com/sharer/sharer.php? U = '+ window. location. href); "> </menuitem>
9. </Menu>
10. </Menu>
11. </Section>

It should be noted that it is best to use JavaScript to dynamically create these menu codes, because menu events will eventually call JavaScript to execute tasks. if JavaScript is disabled, the right-click menu will not be generated, he does not see the menu at the same time.

Element. dataset

Using dataset APIs, programmers can easily obtain or set data-* Custom Attributes:

Copy XML/HTML Code to clipboard

1. /* The following code is used as an example.
3. <Div id = "myDiv" data-name = "myDiv" data-id = "myId" data-my-custom-key = "This is the value"> </div>
5. */
7. // Obtain the element
8. Var element = document. getElementById ("myDiv ");
10. // Obtain the id
11. Var id = element. dataset. id;
13. // Read the value of "data-my-custom-key"
14. Var customKey = element. dataset. myCustomKey;
16. // Modify it to another value
17. Element. dataset. myCustomKey = "Some other value ";
19. // The result is:
20. // <Div id = "myDiv" data-name = "myDiv" data-id = "myId" data-my-custom-key = "Some other value"> </div>

Similar to classList, it is simple and practical.

Window. postMessage API

Even IE8 has supported postMessage API for many years. The postMessage API allows you to transmit information data between two browser windows or iframe:

Copy the content to the clipboard using JavaScript Code

1. // Send A message from the window or iframe in Domain A to the window or ifame in Domain B
2. Var iframeWindow = document. getElementById ("iframe"). contentWindow;
3. IframeWindow. postMessage ("Greetings from the first window! ");
5. // Receive messages in a window or iframe In the second domain
6. Window. addEventListener ("message", function (event ){
7. // Check the validity of the domain
8. If (event. origin = "http://www.webhek.com "){
9. // Output log information
10. Console. log (event. data );
12. // Feedback message
13. Event. source. postMessage ("are you good! ");
14. }
15. ]);

The message body can only be a string, but you can use JSON. stringify and JSON. parse to convert the message to a more meaningful data body!

Autofocus attribute

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

Copy XML/HTML Code to clipboard

1. <Input autofocus = "autofocus"/>
2. <Button autofocus = "autofocus"> Hi! </Button>
3. <Textarea autofocus = "autofocus"> </textarea>

The autofocus attribute is an ideal feature in a fixed mode like Google search pages.

The browser has slightly different support for each API. Therefore, check the support for these features before use. Take some time to read the detailed descriptions of each API. I believe you will have more discoveries.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.