Be aware that in the subsequent instructions, the term ‘element’ may refer to either an instance of an element or a query selector.
Set attribute value
Description:
For any specific element, assign an attribute value. This value could be the actual value or a property path located within the context, process, or item.
{
"type": "dom",
"action": "set_attribute",
"args": {
"element": "my-element",
"attr": "disabled",
"value": "disabled"
}
}You can set multipole attributes using “set_attributes”.
{
"type": "dom",
"action": "set_attributes",
"args": {
"element": "my-element",
"attributes": {
"disabled": "disabled",
"data-value": "$data.value"
}
}
}Get attribute values
Description:
Read the description value of an attribute for a given element.
{
"type": "dom",
"action": "get_attribute",
"args": {
"element": "my-element",
"attr": "data-value",
"target": "$data.value"
}
}Remove attribute from a element
Description:
Remove an attribute from the defined element.
{
"type": "dom",
"action": "remove_attribute",
"args": {
"element": "my-element",
"attr": "data-value"
}
}Add a css class to an element
Description:
Append a CSS class to a specified element. This action will incorporate the class into the element’s class list.
{
"type": "dom",
"action": "add_class",
"args": {
"element": "my-element",
"value": "horizontal"
}
}You can include a collection of classes by setting the value as an array of strings. Each string in the array represents a class you wish to add.
{
"type": "dom",
"action": "add_class",
"args": {
"element": "my-element",
"value": ["horizontal", "red"]
}
}Remove css class on element
Description:
Remove an attribute from a given element.
{
"type": "dom",
"action": "remove_class",
"args": {
"element": "my-element",
"value": "disabled"
}
}To remove a group of attributes, set the value as an array of strings. Each string in this array should be the name of the attribute you intend to remove.
{
"type": "dom",
"action": "remove_class",
"args": {
"element": "my-element",
"value": ["disabled", "hidden"]
}
}Set a element style property
Description:
Assign a specific value to the element’s style property. This action is analogous to using element.style.propertyName = 'value'.
You can set a single property:
{
"type": "dom",
"action": "set_style",
"args": {
"element": "my-element",
"style": "background",
"value": "red"
}
}Or multiple:
{
"type": "dom",
"action": "set_styles",
"args": {
"element": "my-element",
"styles": {
"color": "black",
"background": "white"
}
}
}Get element style value
Description:
Retrieve the value of a specified style property. Be aware that the format of the value you read might differ from the format in which you wrote it, even though the value itself remains the same. For instance, you might input a color in hex format like ‘#ff0090’, but when you read it, the format could be ‘rgb(255, 0, 144)’.
{
"type": "dom",
"action": "get_style",
"args": {
"element": "my-element",
"style": "background",
"target": "$data.background"
}
}Set css variable
Description:
For elements that incorporate CSS variables in their styling, the optimal approach to modify their appearance is to update the variable rather than setting the style directly. This method facilitates effortless styling adjustments and enables subtle variations in style.
{
"type": "dom",
"action": "set_css_variable",
"args": {
"element": "my-element",
"variable": "--background",
"value": "#ff0090"
}
}If you want to set multiple variables, use set_css_variables
{
"type": "dom",
"action": "set_css_variables",
"args": {
"element": "my-element",
"variables": {
"--foreground": "white",
"--background": "#ff0090"
}
}
}Get css variable value
Description:
In certain situations, you may need to read the CSS variable to execute additional operations..
{
"type": "dom",
"action": "get_css_variable",
"args": {
"element": "my-element",
"variable": "--background",
"target": "$data.background"
}
}You can also fetch multiple variables in one call.
{
"type": "dom",
"action": "get_css_variables",
"args": {
"element": "my-element",
"variables": ["--foreground", "--background"],
"target": "$data.variables"
}
}The result is an array of values, for example, the above would result in["rgb(255, 255, 255)", "rgb(255, 0, 144)"]
Set element text
Description:
This method updates an element’s text using its textContent property. It is a more secure option compared to setting innerHTML and is considered the best practice for altering the inner text of an element.
{
"type": "dom",
"action": "set_text",
"args": {
"element": "my-element",
"value": "Hello World"
}
}Get element text value
Description:
This retrieves the text of the element by accessing its textContent property.
{
"type": "dom",
"action": "get_text",
"args": {
"element": "my-element",
"target": "$data.textValue"
}
}Get an element
Description:
When you need to interact directly with an element, it’s necessary to have a method for retrieving that element from the DOM.
{
"type": "dom",
"action": "get_element",
"args": {
"element": "my-element",
"target": "$data.element"
}
}Creating a new element
Description:
Create a element of any type and set common values in one call.
This includes:
- add attributes
- set style properties
- add css classes to the class list
- set css variables on the element
- set dataset properties
- set the textContent property
- create and add child elements
- add element to an existing element
Simple example:
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"target": "$data.element"
}
}Target is optional as you can also add it directly to a parent element.
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"parent": "#parent-element"
}
}Setting attributes example:
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"target": "$data.element",
"attributes": {
"disabled": "disabled"
}
}
}Setting styles example:
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"target": "$data.element",
"styles": {
"color": "black",
"background": "whitesmoke"
}
}
}Classes example:
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"target": "$data.element",
"classes": ["horizontal", "red"]
}
}Set css variables example:
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"target": "$data.element",
"variables": {
"--cl-background": "#ff0090"
}
}
}Dataset example:
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"target": "$data.element",
"dataset": {
"id": "test"
}
}
}Updating the dataset object on a element will generate data-attributes on that element.
Combination example:
{
"type": "dom",
"action": "create_element",
"args": {
"tag_name": "div",
"text_content": "Hello World",
"target": "$data.element",
"attributes": { ... },
"styles": { ... },
"classes": [ ... ],
"variables": { ... },
"dataset": { ... }
}
}Remove element
Description:
Remove a element from the UI.
{
"type": "dom",
"action": "remove_element",
"args": {
"element": "my-element"
}
}Remove child elements
Description:
Remove child elements from a element.
{
"type": "dom",
"action": "clear_element",
"args": {
"element": "my-element"
}
}Move a element to another parent
Description:
Detach the element from its existing parent element and attach it to a different parent element.
{
"type": "dom",
"action": "clear_element",
"args": {
"element": "my-element",
"parent": "#new-parent"
}
}Move element between siblings
Description:
Move a element above or below a sibling element. For example, I have a list of items in a unordered list. I want to move the first item in the list down so that it is now the second list item.
Move down example:
{
"type": "dom",
"action": "move_element_down",
"args": {
"element": "li",
}
}Move up example:
{
"type": "dom",
"action": "move_element_up",
"args": {
"element": "li",
}
}