The Element
class contains a dataset
property that is designed to access (read and write) data attributes on element. It automatically prefix your attribute names with data, so you don't have to do it yourself:
var animalType = listItemElement.dataset['animalType];
One important thing is, that the dataset
attribute converts all attribute names to camel-case. If you have animal-type
you need to access animalType
.
The data-
prefix is required for custom attributes that should not affect the layout in HTML5. If you don't use it, validation of your document might not succeed.