This is the 14th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

Today we are going to talk about THE CSS extension of H5, we also know the scope of H5 coverage and its extensive, today on CSS to talk about it.

The CSS class extensions

One of the major changes in Web development since HTML4 was widely adopted is the increasing use of the class attribute, which is used to add style and semantic information to elements. Naturally, JavaScript interacts more with CSS classes, including dynamically changing class names, querying elements based on a given class name or set of class names, and so on. To accommodate developers and their acceptance of the class attribute,HTML5 has added features that make it easier to use CSS classes. GetElement ByClassName (), getElementsByClassName () is one of HTML5’s most popular new methods, exposed on document objects and all HTML elements. This approach is derived from JavaScript libraries that implement this functionality based on the original DOM features, providing a high performance native implementation.

The getElementsByClassName () method takes an argument, a string containing one or more class names, and returns the NodeList containing the elements of the corresponding class in the class name. If multiple class names are provided, the order does not matter. Here are a few examples: // Get all class names containing “username” and “current” elements // The order of the two class names does not matter \

1etal1CurrentUsernames= document.getelementsbyClassName (" username current ");// Get all elements \ of the "selected" class in the subtree of the element with ID "my Div"
 let selected = document . getElementBy Id (" myDiv "). getElementsByClassName (" selected ");
Copy the code

This method only returns all matched elements in the subtree whose root element is the calling object. Calling getElementsByClassName () on a document returns all matched elements in the document, while calling getElement sby-classname () on a particular element returns matched elements in the element’s descendants. This method is handy if you want to add event handlers to elements that contain a specific class, rather than a specific ID or tag. Remember, however, that since the return value is NodeList, using this method will encounter the same thing as using getElementsByTagName().

HTML5 provides a simpler and safer way to do this by adding classList attributes to all elements. ClassList is an instance of a new collection type, DOMTokenList. Like other DOM collection types, DOMTokenList has a length attribute to indicate how many items it contains, and individual elements can also be retrieved through item () or brackets. In addition, DOMTokenList adds the following methods.

  • Add (value) adds the specified string value value to the class list. If the value already exists, do nothing.
  • Contains (value), which returns a Boolean value indicating whether the given value exists.
  • Remove (value), removes the specified string value value from the class list.
  • Toggle (value) : if the specified value already exists in the class list, it is deleted. If it does not exist, add it.

Thus, so many lines of code in the previous example can be simplified to one: div.classlist.remove (” user “); This line of microisometric code can be deleted without affecting other class names. Other methods also greatly simplify the complexity of operation class names, as shown in the following example:

/ Remove the "disabled" class div.classlist. remove (" disabled ");// Add the "current" classDiv. ClassList, add (" current "); / switch" user "Class div.classList. toggle ()"User"); For (let class of div. ClassList){doStuff (class);Copy the code

After adding the classList attribute, the className attribute is not used unless the element’s class attribute is completely removed or overridden. IE10 and later (partially) and other major browsers (fully) implement the classList attribute.