The classList attribute of HTML5 practice and Analysis

We have introduced some new HTML5 selectors, including querySelector (), querySelectorAll (), and getElementsByClassName (). These three features have their own unique functions. If you need them, you can refer to the related content in HTML5 practice and analysis. Today, we will introduce the classList attribute.

What is the classList attribute? let's leave it alone. To solve this problem, how can we delete one of the elements with multiple class names? Menglong's strong brains finally come up with a method of implementation. Delete the class name meng from the class names li, meng, and long. The Code is as follows:

 

HTML code

 

1. <Div class = "li meng long"> Menglong xiaozhan </div>

 

JavaScript code

// Obtain the div var div = document. getElementsByTagName ("div") [0]; // obtain the class name string and split it into an array var allClassName = div. className. split (""); // find the class name var I, len, pos =-1; for (I = 0, len = allClassName. length; I <len; I ++) {if (allClassName [I] = "meng") {pos = I; break ;}// Delete the class name allClassName. splice (pos, 1); alert (allClassName) // li, long // splice other class names into strings and re-add them to the class name div of the element. className = allClassName. join ("");

 

Preview Effect

 

 

 

To delete "meng" from the element class name, the above code is required. Use a similar algorithm to replace the class name and check whether the element contains the class name. If you want to add a class name, you can concatenate a string, but you must check that the same class name will not be added multiple times. Many JavaScript libraries have implemented this method to simplify the operation. To delete a class name, you must first obtain the existing class name, locate the location of the class name to be deleted, and then delete it.

 

The above method shows that several lines of code are required to implement a simple delete function. If you do not want to write several lines of code, you must introduce a method in the library. With HTML5, you don't have to worry about it. We can use the classList attribute in html5. This classList attribute is an instance of the new collection type DOMTokenList. Similar to other DOM collections. DOMTokenList has a length attribute indicating the number of elements it contains. To obtain each element, you can use the item () method or square brackets syntax. In addition, the following method is defined for this new type.

 

1. remove (value)

 

The remove (value) method deletes a given string from the list. An example is as follows:

 

HTML code

<Div class = "li meng long"> Menglong xiaozhan </div>

 

JavaScript code

 

// Obtain the div var div = document. getElementsByTagName ("div") [0]; alert (div. classList) // li meng long div. classList. remove ("meng") alert ("div. className: "+ div. className) // div. className: li long

Preview Effect

 

 

2. contains (value)

 

The contains (value) method indicates whether a given value exists in the list. If yes, "true" is returned; otherwise, "false" is returned. An example is as follows:

 

HTML code

1. <Div class = "li meng long"> Menglong xiaozhan </div>

 

JavaScript code
 

// Obtain the div var div = document. getElementsByTagName ("div") [0]; alert (div. classList. contains ("meng") // true alert (div. classList. contains ("menglong") // false

 

 

3. add (value)

 

The add (value) method indicates that the strings in the list are added to the list. If it already exists, it will not be added. An example is as follows:

 

HTML code

<Div class = "li meng long"> Menglong xiaozhan </div>

 

JavaScript code

// Add the class name menglong // obtain the div var div = document to delete the class name meng. getElementsByTagName ("div") [0]; div. classList. add ("menglong"); alert ("div. className: "+ div. className) // div. className: li meng long menglong

 

Preview Effect

 

 

4. toggle (value)

 

Toggle (value) method. If a given value already exists in the List, delete it. If no value exists in the list, add it. An example is as follows:

 

HTML code

<Div class = "li meng long"> Menglong xiaozhan </div> <div class = "li long"> Menglong xiaozhan </div>

 

JavaScript code

// Switch the class name meng // obtain the div var div = document. getElementsByTagName ("div"); var I, len; for (I = 0, len = div. length; I <len; I ++) {div [I]. classList. toggle ("meng");} alert ("div [0]. className: "+ div [0]. className) // div [0]. className: li long alert ("div [1]. className: "+ div [1]. className) // div [1]. className: li meng long

 

Preview Effect

 

 

 

The small examples of classList have already been presented for everyone. through small examples, we can clearly present and explain these small methods. With classList, you will not be able to use the className attribute unless you need to delete all the class names or completely override the class attributes of the element. There are also many practical methods attached. Browsers that support the classList attribute include Firefox 3.6 + and Chrome.

The classList attribute of HTML5 practice and analysis is introduced here. The accumulation of bit by bit is the success of tomorrow. One day I learned HTML5, and one day I will be able to learn it successfully. Thank you for your support of Menglong xiaostation. For more HTML5 updates, please stay tuned to Menglong xiaostation's updates on HTML5 practice and analysis.