Example of using Classlist method in HTML5

Prior to this, jquery hasclass, AddClass, removeclass we are familiar with, but we do not in each project will be used jquery or zepto, for example, in the mobile end of the page, In view of the legendary performance and static resource requirements, we usually choose to use the original JS, but for the element class operation. The first thing you think about is classname, the guy who got the support of all the old modern browsers, including IE6, and even though its functionality is simply weak, people have been using it for quite some time, and even some of the base libraries have just expanded through classname. But as browsers continue to escalate and more rich JavaScript APIs are supported, this article is one of the classlist. It makes it easy to check the class names of the elements, of course, the API designer doesn't do everything for you, it still has some minor flaws, but it's a leap compared to classname.

Classlist compatibility is shown in the following illustration:

Classlist, let your JS easily manipulate the DOM class

As you can see from the picture above, it is the IE that has been badly dragged down, until IE10, Microsoft has finally reflected. On the mobile side, except Android 2.3 and the following version of WebView does not support Classlist, other browser terminals are well supported. Since Android 2.3 devices are as obsolete as IE, we can still play happily with classlist, especially in terminals based on the WebKit kernel. Now, let's get to the point. (Ni-Ma, it turns out that a bunch of crap in front)

Classlist is a member of an HTML element object, and it is very simple to use. We use the following ways:

Console.dir (document.body.classList);

Its constructor (constructor) is found to be domtokenlist. It provides these known api:length, item, add, remove, contains, toggle. Other grey parts such as ToString can be ignored first.

Here's a description of the members of the Classlist:

Length
static properties. Gets the number of element class names, using the method:

var len = document.body.classList.length;

Item
Method. Gets the class name of the element, accepting an argument, a numeric index. How to use:

Returns NULL if index is out of range
The var cls = Document.body.classList.item (index);

Add
Method. Class that is used to increase the element, accepting a parameter, that is, the class name. How to use:

Document.body.classList.add (' MyClass ');

Unfortunately, it can only add one class at a one-time, such as the following method will be the error
Document.body.classList.add (' Class1 class2 ');

If you need to add more than one class, you can only perform multiple Add.

Remove
Method. The class used to delete the element, accepting a parameter, the class name. As with add, it can only delete one class at a one-time. How to use:

Document.body.classList.remove (' MyClass ');

Contains
Method. Used to detect whether an element contains a class, and returns a Boolean value. How to use:

Document.body.classList.contains (' MyClass '); Returns TRUE or False

Toggle
Method. This guy is the triple version of Add, remove, and contains, not only to detect whether the element contains a class, but also to add and remove functions, that is, if there is a class, removed, if it does not exist, it is added. Returns a Boolean value. How to use:

If the body does not exist Classtest class name, it will add a classtest class to the body
Document.body.classList.toggle (' classtest '); True

Again, Classtest has been deleted.
Document.body.classList.toggle (' classtest '); False

The convenience of Classlist is only the tip of the iceberg of native JavaScript, and in fact standard browsers are very handy for DOM operations, especially the search for selectors, such as Getelementsbyclassname, Queryselector and Invincible Queryselectorall and so on. When you use jquery or Zepto to stop at all, perhaps you need to soothe your busy hands, hug native, it is a vast expanse of the world!