DomClassList

This class encapsulates a list of CSS classes which can be set as the className on an HTMLElement.

Properties names set on this class equate to adding a class if the property's value is truthy, or removing a class if the value is falsy.

const myClassList = new DomClassList('b-test-button');

myClassList.add('test-class');
myClassList.important = 1;

myHtmlElement.className = myClassList; // Sets it to "b-test-button test-class important"

Properties

value: String

Get/set string value. Class names separated with space.

values: String[]readonly

Returns string values as an array.

Functions

add

Add CSS class(es)

myClassList.add('bold', 'small');

Parameter	Type	Description
`classes`	String \| String[] \| Object	CSS classes to add

assign

Adds/removes class names according to the passed object's properties.

Properties with truthy values are added. Properties with falsy values are removed.

Parameter	Type	Description
`classList`	Object	Object containing properties to set/clear

assignTo

Adds/removes this objects classes to the passed classList or element.

Properties with truthy values are added. Properties with falsy values are removed.

Parameter	Type	Description
`element`	HTMLElement \| DOMTokenList	The element or the element's `classList` to be updated.

clear

Clears all class names from this DomClassList instance.

Returns: DomClassList -

this DomClassList.

clone

Returns a clone of this DomClassList with all the same keys set.

Returns: DomClassList -

A clone of this DomClassList.

constructor

Initializes a new DomClassList.

Parameter	Type	Description
`classes`	String \| Object	The CSS classes as strings or objects.

contains

Returns a Boolean value, indicating whether this ClassList has the specified CSS class name.

Parameter	Type	Description
`className`	String	CSS class name to check

Returns: Boolean -

true if this ClassList contains the passed CSS class name, false otherwise

isEqual

Compares this DomClassList to another DomClassList (or class name string of space separated classes). If the same class names (regardless of order) are present, the two are considered equal.

So new DomClassList('foo bar bletch').isEqual('bletch bar foo') would return true

Parameter	Type	Description
`other`	DomClassList \| String	The `DomClassList` or string of classes to compare to.

Returns: Boolean -

true if the two contain the same class names.

remove

Remove CSS class(es)

myClassList.remove('bold', 'small');

Parameter	Type	Description
`classes`	String	CSS classes to remove

set

Sets this DomClassList instance to represent the classes passed as either strings or objects.

Parameter	Type	Description
`classes`	String	The CSS classes to set.

Returns: DomClassList -

this DomClassList.

split

Analogous to the String#split method, but with no delimiter parameter. This method returns an array containing the individual CSS class names set.

Returns: String[] -

The individual class names in this DomClassList

toggle

Toggles the passed CSS class name.

If the force parameter is passed, true means add the class name, false means remove it.

myClassList.toggle('bold', isImportant);

Parameter	Type	Description
`className`	String	CSS class to toggle
`force`	Boolean	`true` to add the class, `false` to remove it.

Returns: Boolean -

true if the operation changed the value.

trim

Analogous to string.trim, returns the string value of this DomClassList with no trailing space.

Returns: String -

A concatenated string value of all the class names in this DomClassList separated by spaces.