Search within TutorialsPark

Javascript DOM: Element Objects


Use Javascript DOM Element Objects to read and manipulate data about the elements


Javascript DOM : Element Objects

The Javascript DOM HTMLElement object has a set of properties and methods that can be used to read and manipulate data about the element being represented.

Table : Element Data Properties

Property Description Returns
checked To set or get the presence of the checked attribute boolean
classList To set or get a list of classes to which the element belongs DOMTokenList
className 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
add(<class>) To add a specified class to the element void
contains(<class>) A boolean method, it returns true with the element belongs to the specified class boolean
length To get the number of classes to which the element belongs number
remove(<class>) To remove the specified class from an element void
toggle(<class>) To add the class if not present earlier and removes it if its already present boolean

Along with these properties and methods, you can also get classes based on index, using array-style notation.

Example: Javascript DOM property classList Method

Give it a TRY! » Note: The function classesList() uses the property listClasses to enumerate the classes to which the element <p> belongs.


Javascript DOMTokenList Members: remove() and add()

The Javascript DOM Node property remove(value) is used to remove a given string from the list.

While the method add(value) adds a given string value to the list, if the value already exists then its not added.

Example: Javascript DOMTokenList Members remove() and add()

Give it a TRY! » Note: Classes are added and remove when the button is clicked.


Javascript DOM Node Method : hasChildNodes()

The Javascript DOM Node Method hasChildNodes() checks the specified element and returns true if the current element has one or more child elements or false if none.

Example: Javascript DOM Node Method - hasChildNodes()

Give it a TRY! » Note: The returns value is a booleantrue or false