DOM

DOM (Document Object Model) is the interface for HTML and JavaScript interaction. JavaScript uses DOM to access HTML elements, such as getting values, setting values, toggling states, modifying styles, responding to events, etc.

DOM blocks are associated with corresponding elements through the ID attribute of HTML blocks (the radios block uses the name attribute). If an HTML block does not have an ID attribute, it cannot be accessed through DOM and will only be displayed as a UI element. Elements that can receive user input or interact with the user are commonly called controls. such as input fields, drop-down lists, checkboxes, buttons, etc.

DOM blocks can be categorized by function:

• Blocks used for program initialization.
• Blocks used for getting values, setting values, toggling states, or modifying styles.
• Blocks used for responding to events.

initialize

The initialize block runs automatically when the program starts, initializing elements or program states.

Example

In the example, the input field's ID is INP. Inside the initialize block, there is only one statement: setting the value of the control with ID INP to Hello. After the program starts, the input field will be automatically set to Hello.

radios get checked value

radios get checked value retrieves the currently selected value from a group of radio buttons based on the group name. The return value is of the text type.

Attributes

• name - The group name of the radio buttons.

Example

Gets the selected value of a group of radio buttons with the group name Meals and saves it to the variable Value.

radios set checked value

radios set checked value sets a group of radio buttons to the selected value specified by the parameter based on the group name. The parameter is connected to the right-side input socket.

Attributes

• name - The group name of the radio buttons.

Example

Sets the selected value of a group of radio buttons with the group name Meals to 3.

control get value

control get value retrieves the value of a control. Supported controls and corresponding return values:

• input - Returns the value of the input field.
• textarea - Returns the content of the text area.
• select - Returns the value of the currently selected option (value).
• range - Returns the current numeric value.
• checkbox - According to the return value type (as attribute):
  • string: 'true' - checked; 'false' - unchecked.
  • number: 1 - checked; 0 - unchecked.

Attributes

• ID - The control's ID.
• as - Return value type:
  • string - The default return type is text.
  • number - When the return text of the control can be represented as a numeric value, selecting this will automatically convert it to numeric and return it. For checkbox controls, the numeric return will use 1/0 instead of 'true'/'false'.

Example

Gets the value of the control with the ID INP (e.g., an input field) and saves it as text to the variable Content.

control set value

control set value sets the value of a control. The value parameter is connected to the right-side input socket. Supported controls and parameters:

• input - The parameter is the value of the input field.
• textarea - The parameter is the content of the text area.
• select - The parameter is the value of the option to be selected.
• range - The parameter is the numeric value to be set.
• checkbox - Supports different parameter types:
  • Text: 'true' - checked; 'false' - unchecked.
  • Numeric: 1 - checked; 0 - unchecked.
  • Boolean: true - checked; false - unchecked.
• text - The parameter is the text to be set.
• paragraph - The parameter is the content for the paragraph, with line breaks represented by <br>.

Attributes

• ID - The control's ID.

Example

Sets the value of the control with the ID INP (e.g., an input field) to the value of the Content variable.

control set state

control set state sets the control to an enabled or disabled state. The input socket on the right connects to a boolean value true for enabled, and false for disabled. The supported controls are:

• input
• textarea
• select
• range
• checkbox
• button

Attributes

• ID - The control's ID.

Example

Sets the control with ID SEND (e.g., a button) to the disabled state.

text get content

text get content retrieves the content of a text element (either a text or paragraph) with the specified ID. The return value is of the text type.

Attributes

• ID - The text element's ID.

Example

Retrieves the content of the text element with ID TITLE and saves it to the variable Title.

text set content

text set content sets the content of a text element (either a text or paragraph) with the specified ID. The text parameter is connected to the right-side input socket.

Attributes

• ID - The text element's ID.

Example

Sets the text element with ID TITLE to display the content Hello.

image get src

image get src retrieves the image URL of the specified ID. The return value is of the text type.

Attributes

• ID - The image's ID.

Example

Retrieves the image URL of the image with ID LOGO and saves it to the variable Logo.

image set src

image set src sets the image URL of the specified ID. The URL parameter is connected to the right-side input socket.

Attributes

• ID - The image's ID.

Example

Sets the image URL of the image with ID LOGO to https://picsum.photos/100.

element set class

element set class sets the CSS class name of an element, so that the UI element can dynamically change its appearance, such as hiding it dynamically. This block can be applied to all elements with a specified ID, including UI elements in the Widgets and Network categories. Node-App builds applications based on the Bootstrap style library and supports all CSS class names defined by Bootstrap. See Bootstrap.

Attributes

• ID - The element's ID.
• action - The action to be performed:
  • add - Add a CSS class name.
  • remove - Remove a CSS class name.
  • toggle - Toggle a CSS class name (add if it doesn't exist, remove if it exists).
• class - The CSS class name.

Example

Add the hidden CSS class to the element with ID SEND (e.g., a button) to hide it.

element set style

element set style sets the CSS properties of an element and can be applied to all elements with a specified ID. CSS properties are the basic units for controlling styles, providing more granular options than CSS classes. See CSS Cascading Style Sheets.

Attributes

• ID - The element's ID.
• action - The action to be performed:
  • add - Add a CSS property (name and value).
  • remove - Remove a CSS property (name).
• style - The CSS property name.
• value - The CSS property value.

Example

Sets the CSS property background of the element with ID INP (e.g., an input field) to orange.

button event

button event handles button events. When a button with the specified ID is triggered, the program jumps to the corresponding button event block to start execution.

Attributes

• ID - The button's ID.
• event - The type of event to respond to:
  • click - Button click.
  • press - Button press.
  • release - Button release.

Example

The example comes from the Hello, World! app. When the button with ID BTN is clicked, it sets the input field to display Hello, World!.

input event

input event handles input events. When an input control with the specified ID is triggered, the program jumps to the corresponding input event block to start execution. Supported controls are:

• input
• textarea
• select
• range
• checkbox

Attributes

• ID - The input control's ID.
• event - The type of event to respond to:
  • change - Value changed (after the control loses focus).
  • input - Value is being entered (while the control has focus).
  • focus - Control gets focus.
  • blur - Control loses focus.

Example

When the input field with ID INP changes, add the prefix @ to the input field content.