DOM 界面交互

DOM（Document Object Model，文档对象模型）是HTML与JavaScript交互的接口。JavaScript利用DOM访问HTML元素，例如获取值、设置值、切换状态、修改样式、响应事件等。

DOM块通过HTML块的ID属性与对应的界面元素关联（radio 块为name属性）。若HTML块未设置ID属性，则无法通过DOM访问，只作为界面元素显示。能接收用户输入，或与用户交互的元素，通常又称作控件（control），例如输入框、下拉列表、复选框、按钮等。

DOM块按照功能可分为：

• 用于程序初始化的块。
• 用于获取值、设置值、切换状态，或修改样式的块。
• 用于响应事件的块。

initialize 初始化

初始化代码块在程序启动时自动运行，用于界面元素或程序状态的初始化。

样例

样例中输入框的ID为INP。在 initialize 块内只有一条语句：将ID为INP的控件值设置为Hello。程序启动后，输入框将被自动设置为Hello。

radios get checked value

radios get checked value 根据分组名称（name）从一组单选按钮中获取当前选中值。返回值为文本类型。

属性

• name - 单选按钮的分组名称。

样例

取分组名为Meals的一组单选按钮的选中值，保存到Value变量中。

radios set checked value

radios set checked value 根据分组名称（name）将一组单选按钮设置为参数指定的选中值。参数连接于右侧（value）参数槽。

属性

• name - 单选按钮的分组名称。

样例

设置分组名为Meals的一组单选按钮的选中值为3。

control get value

control get value 用于获取控件的值。支持的控件及对应返回值说明：

• input - 返回输入框的值。
• textarea - 返回文本区的内容。
• select - 返回当前选中项的值（value）。
• range - 返回当前数值。
• checkbox - 按返回值类型（as 属性）：
  • string（文本）：'true' - 勾选；'false' - 未勾选。
  • number（数值）：1 - 勾选；0 - 未勾选。

属性

• ID - 控件ID。
• as - 返回值类型：
  • string - 文本。控件的默认返回值为文本类型。
  • number - 数值。当控件的返回文本可以表示为数值时，选择number将自动转换为数值返回。对于 checkbox 控件，数值返回将以1/0替代文本'true'/'false'。

样例

获取ID为INP的控件（如输入框）的值，以文本形式保存到变量Content中。

control set value

control set value 用于设置控件的值。参数连接于右侧（value）参数槽。支持的控件及参数说明：

• input - 参数为输入框的值。
• textarea - 参数为文本区的内容。
• select - 参数为选中项的值（value）。
• range - 参数为要设置的数值。
• checkbox - 支持不同参数类型：
  • 文本：'true' - 勾选；'false' - 未勾选。
  • 数值：1 - 勾选；0 - 未勾选。
  • 布尔型：true - 勾选；false - 未勾选。
• text - 参数为要设置的文本。
• paragraph - 参数为要设置的文本段内容，文本中的换行用<br>表示。

属性

• ID - 控件ID。

样例

设置ID为INP的控件（如输入框）的值为Content变量的值。

control set state

control set state 用于设置控件为有效或无效状态。右侧（enabled）参数槽连接布尔值true表示有效状态，false表示无效状态。支持的控件有：

• input - 输入框。
• textarea - 文本框。
• select - 下拉列表。
• range - 滑块。
• checkbox - 复选框。
• button - 按钮。

属性

• ID - 控件ID。

样例

设置ID为SEND的控件（如按钮）为无效状态。

text get content

text get content 用于获取指定ID的文本元素（text 或 paragraph）的内容。返回值为文本类型。

属性

• ID - 文本元素ID。

样例

获取ID为TITLE的文本元素的内容，并保存到变量Title中。

text set content

text set content 用于设置指定ID的文本元素（text 或 paragraph）的内容。文本参数连接于右侧（content）参数槽。

属性

• ID - 文本元素ID。

样例

设置ID为TITLE的文本元素显示内容Hello。

image get src

image get src 用于获取指定ID的图片URL源。返回值为文本类型。

属性

• ID - 图片ID。

样例

获取ID为LOGO的图片URL源，并保存到变量Logo中。

image set src

image set src 用于设置指定ID的图片URL源。地址参数连接于右侧（src）参数槽。

属性

• ID - 图片ID。

样例

设置ID为LOGO的图片URL源为https://picsum.photos/100。

element set class

element set class 用于设置元素的CSS类名，使界面元素能动态改变外观（例如动态隐藏）。此块适用于所有指定ID的元素，包括小部件（Widgets）与网络（Network）分类中的界面元素。Node-App基于Bootstrap样式库构建应用，支持Bootstrap定义的所有CSS类名。参考Bootstrap。

属性

• ID - 界面元素ID。
• action - 要执行的操作：
  • add - 添加CSS类名。
  • remove - 删除CSS类名。
  • toggle - 切换CSS类名（不存在则添加，已存在则删除）。
• class - 指定CSS类名。

样例

给ID为SEND的元素（如按钮）添加CSS类名hidden（使按钮隐藏）。

element set style

element set style 用于设置元素的CSS属性，适用于所有指定ID的元素。CSS属性是样式控制的基本单元，提供较CSS类名更细粒度的选项。参考CSS层叠样式表。

属性

• ID - 界面元素ID。
• action - 要执行的操作：
  • add - 添加CSS属性（属性名和属性值）。
  • remove - 删除CSS属性（属性名）。
• style - 指定CSS属性名。
• value - 指定CSS属性值。

样例

给ID为INP的元素（如输入框）设置CSS属性background（背景）的值为orange（橙色）。

button event

button event 用于响应按钮事件，当指定ID的按钮触发事件时，程序将跳转到对应的 button event 块开始执行。

属性

• ID - 按钮ID。
• event - 要响应的事件类型：
  • click - 按钮单击。
  • press - 按钮按下。
  • release - 按钮释放。

样例

样例来自 Hello, World! 程序，当ID为BTN的按钮被点击时，设置输入框显示Hello, World!。

input event

input event 用于响应输入事件，当指定ID的输入控件触发事件时，程序将跳转到对应的 input event 块开始执行。支持的控件有：

• input - 输入框。
• textarea - 文本区。
• select - 下拉列表。
• range - 滑块。
• checkbox - 复选框。

属性

• ID - 输入控件ID。
• event - 要响应的事件类型：
  • change - 控件值改变（当控件失去焦点后触发）。
  • input - 控件值输入（控件未失去焦点）。
  • focus - 控件得到焦点。
  • blur - 控件失去焦点。

样例

当ID为INP的输入框改变时，给输入框内容添加前缀@。