Search within TutorialsPark

Javascript DOM: Element Attributes


Use Javascript DOM Element Attributes to read and manipulate any attribute of an element


Javascript DOM : Element Attributes

The Javascript DOM HTMLElement object has a set of properties and methods that can be used to read and manipulate any attribute on an element.

The table below, defines in complete detail the set of properties and methods to just do that.

Table : Attribute Methods and Properties

Property Description Returns
attributes To set or get the presence of the checked attribute boolean
dataset To set or get a list of classes to which the element belongs DOMTokenList
getAttribute To set or get a list of classes to which the element belongs string
dir To set or get the value of the dir attribute string
disabled To set or get the value of the disabled attribute boolean
hidden To get the value of the hidden attribute boolean
id To set or get the value of the id attribute string
lang To set or get the value of the language attribute string
spellcheck To Get of set the presence of the spellcheck attribute boolean
tabIndex To set or get the value of the attribute tabindex number
tagName To Return the tag name, which specifies the element type string
title To set the value of the title Attribute string

Javascript DOM : HTMLElement Data Properties

Give it a TRY! » Note: The above code is functional in all major mainstream browser.


Javascript DOM : Working with Classes

Javascript DOM can also be used to get and set elements using their classes.There are two ways to do just that.

The first and the most common way is to make use of the property className, it returns a list of all the classes.

Classes can be added or removed by simply changing the value of the string. The below demo, shows adding new class to an element.

Example: Javascript DOM property className

Give it a TRY! » Note: The script appends a new class to the element .


Javascript DOM property classList

The Javascript DOM property className is used to add classes to an element very quickly and easily.But, it cannot be used to remove a class.

To just do that, you can use the property classList , it returns a DOMTokenList object.

This DOMTokenList object defines some a set of properties and methods which can be used to manage the class list.

Table : DOMToken List Members

Member Description Returns
attributes To return the attribute applied to the element Attr[]
dataset To return the data-* attribute string[<name>]
getAttribute(<name>) To the return the value of the specified attribute string
hasAttribute(<name>) A true is returned if the element has the specified attribute boolean
removeAttribute(<name>) To remove the specified attribute from the element void
setAttribute(<name>, <value> ) To apply an attribute with a specified name and value void

The demo below, makes use of the attribute methods hasAttribute() , setAttribute() and getAttribute() .

Example: Javascript DOM property classList Method

Give it a TRY! » Note: The above methods can be used to query and set nonstandard HTML attributes as well.


Javascript Element Attribute Method : removeAttribute()

The Javascript DOM Element Attribute method removeAttribute() is used to remove the attribute entirely.

Example: Javascript Element Attribute removeAttribute() method

Give it a TRY! » Note: The removeAttribute() method accepts only a single input i.e the attribute.


Javascript DOM data-* Attributes

New HTML5 specifications supports custom attributes that are prefixed with data-*, eg: data-myattribute..

Javascript DOM can be used to work with these custom attributes using the dataset property, this property returns an array of values, indexed by the custom part of the data-*.

Example: Javascript DOM Attribute property - dataset

Give it a TRY! » Note: The values are not indexed as in regular arrays


Javascript DOM : Working with Attributes Property

The Javascript DOM property attributes can be used to get the complete collection of all the attributes of an element.

The property return an array of Attr objects. The properties of Attr are explained in detail in the table below.

Table : DOMToken List Members

Member Description Returns
name To return the name of the attribute string
value Used to get or set the value of the attribute string

In the below demo, the attributes property and the Attr object is used to read the element's attributes and then modify it.

Example: Javascript DOM Attribute Element - attributes Property

Give it a TRY! » Note: The array of Attr objects get indexed by position and name