Test an elements class name using classList and contains

There will be times when instead of using an elements ID, you will wish or need to use an elements class.

This could be due to the inherent limitations of IDs, in particular when using them with layouts or symbols.

It may be because you need a way to group a set of elements and:

• influence them with css
• access to iterate on that group of elements using code
• or testing if an element is of a particular class before you proceed.

An element can have more than one class name assigned to it. Where in contrast that same element can only have one ID.

An Element can have the same class name as any other element.

Class names do not have to be unique and limited to a single element, in contrast an ID must be unique and limited to a single element.

Hype Element class

In Hype we can assign class names to an element via the identity inspector

Hype elements already have a class name given to them by the app.
This is not shown in hypes UI.

But you can see this element has been assigned the class name HYPE_element if you inspect the element.

You can also see the class name foo we gave the element in the class name field in the identity inspector.

The classList command

An Elements Class names are held in a list. In code you access the class list with the classList command

element.classList

The classList will return a DOMTokenList collection of the class attributes with the class names as well as other things.

For our use in accessing the class names in the collection we treat this as we would an array.

Class Index

The class names get an index number in the collection.
The index is the position number in the collection.

When you add a class name to an hype element, that element’s class name will be assigned an index number.
The index number count will go up.

The position of the class name will always remain in the same order.
So the index should always be the same, unless a change is made to the class list like a class name is removed or a new class name is inserted between two existing class names.

Using the index

You can use the the index number ( position in the class list ) to target a class name

For instance, if you give an element a class name in the identity inspector then its index number will be 1.

You can then target that class name at position 1 with code like this

var theClass = element.classList[1] 

If you give the element more than one class via the identity inspector, the index number for each will match the order in the ui.

Here we use two class names, separated by a space.

foo will be index 1, foo2 will be index 2

Using the code

var theClass = element.classList[2]

--> foo2

Note the index actually starts at 0 but the 0 position is always taken by the hype assigned class mentioned above

Using the contains command

You can directly test if the class list contains a class name.

 if (element.classList.contains('foo')){ 
	 // - -  do stuff 
	 }

The contains command will only find whole words from the expression. It will not find foo in the class name foo2.