AddClass and removeClass are two frequently used methods in jquery. It is very convenient to add and remove classes from DOM elements. Today’s native JS classList is as good as, and in some cases better than, jquery’s class manipulation capabilities.
Element. classList is a read-only property that returns a real-time DOMTokenList collection of an element’s class attributes. Although element.classlist itself is read-only, you can modify it using methods like add() and remove(). ClassName is a more convenient way to access and set an element’s classList than using element.className as a whitespace delimited string.
1. What information does the DOMTokenList collection contain
. Length: total number of element class classes
.value: String of the element class, the same string returned by the element.className value
ClassList [0] accesses the first class value, and element.classlist [1] accesses the second class value. (This is also possible: Element.classlist.item (0), element.classlist.item (1)) All that is left to return is some of the methods in the __proto__ prototype chain, which are explained in more detail below.
Add (String [, String [,…]])
AddClass (‘a b’), classList can also add multiple classes at once, but each class is separated by a comma, for example: ElementNodeReference. ClassList. Add (‘ a ‘, ‘b’), if the class already exists in the attribute of the element, so they will be ignored.
Remove (String [, String [,…]]);
.removeclass (‘a b’). ClassList also supports removing multiple classes at once, but each class is separated by a comma. ElementNodeReference. ClassList. Remove (‘ a ‘, ‘b’), and even delete no class value can not lead to throw an exception.
Toggle (String [, force]) toggle(String [, force])
ToggleClass (‘a b’,state),classList can only add or delete a single class value at a time. ElementNodeReference. ClassList. Toggle (‘ a ‘, the state), in which the state support conditional statement wording, such as: ElementNodeReference. ClassList. Toggle (‘ a ‘, I < 10) when there is only one parameter: switch class value; That is, remove the class value and return false if it exists, or add it and return true if it doesn’t. When there is a second argument: adds the specified class value if the result of the second argument is true, or removes it if the result is false.
Contains (String); contains(String); contains(String);
.hasclass (‘a b’), where a and b must appear in the same order as the element’s class values, otherwise false. ClassList only supports checking for the presence of a single class value specified in the element’s class attribute, such as: elementNodeReference.classList.contains(‘a’)
Replace (oldClass, newClass); replace(oldClass, newClass);
To replace a with b in a classList, write:
ElementNodeReference. ClassList. Replace (‘ a ‘, ‘b’), is to emphasize, there are no corresponding method and the matching in jq, can only be called first. RemoveClass (‘ a ‘) and then call. AddClass (‘ b ‘).
7. Browser compatibility
The classList attribute is not supported at all in IE9 or earlier versions, and even IE10 only partially supports it, but it is still usable on Edge. In general, if you do not need compatible IE series, can be bold to rest assured use, can be as convenient as USING JQ.