What is the dojo/dom-prop class?

Dojo is a JavaScript toolkit (library) that provides many utility modules and functions to create a web application. We can save time and speed up the development process using the predefined Dojo modules. Dojo includes language utilities, UI components, and more.

The dojo/dom-prop class

The dojo/dom-prop module is a utility module to get and set the properties of the DOM node. It has two methods get and set.

get method

The get method can be used to get the value of a specific property of the DOM node.

Syntax

get(idOrNodeElem, propertyName);
Syntax of get method

This method takes two arguments

  1. idOrNodeElem: The id of the DOM node or the DOM node itself.

  2. propertyName : The name of the property to get.

Example

Console
Using get method of domProp module to get the property value of the DOM node

Explanation

In the above code:

  • Line 6: We have created a div element with id as parent.

  • Line 7: We load the dojo library from the CDN server.

  • Line 9: We load the dojo/dom-prop module that contains the get and set method.

  • Line 11: We use the get method of the dom-prop to get the innerHTML property of the element with id parent . We will get the innerHTML property as return value.

set method

The set method can be used to set the value of specific or multiple properties of the DOM node.

Syntax

We can call this method with two signatures.

Signature 1

set(idOrNodeElem, propertyName, value);
Syntax of set method
  1. idOrNodeElem: The ID of the DOM node or the DOM node itself.

  2. propertyName : The name of the property to get.

  3. value : The value to be set for the property.

Signature 2:

set(idOrNodeElem, propertiesObject);
Syntax of set method
  1. idOrNodeElem: The id of the DOM node or the DOM node itself.

  2. propertiesObject: The property name value object.

Example

Let's look at the code below:

Console
Using set method of domProp module to set the property value of the DOM node

Explanation

In the above code:

  • Line 6: We have created a div element with id as parent.

  • Line 7: We load the dojo library from the CDN server.

  • Line 9: We load the dojo/dom-prop module that contains the get and set method.

  • Line 15: We use the set method of the dom-prop to set the class property of the element with the id parent . This will set the class property of the parent element as new-class-1.

  • Line 20: We use the set method of the dom-prop to set the properties(class and innetHTML) of the element with the id parent . Here we pass the properties as an object. This will change the class property to new-class-2 and the innerHTML property as new content.

Copyright ©2024 Educative, Inc. All rights reserved