Blockly工具箱是否预置DOM Elements块？如何自定义创建DOM元素积木

预置块可用性结论 #

Blockly 官方默认提供的 toolbox 中没有内置DOM Elements相关的预置积木块。官方默认块集仅覆盖通用编程基础能力：包括逻辑判断、循环、数学/文本运算、变量、函数、列表/字典操作等，DOM操作属于浏览器环境专属的Web API场景，未被纳入默认预置范围。

获取<body>元素自定义块完整实现流程 #

整个实现完全遵循Blockly官方自定义块标准，分为3个核心环节：

1. 注册块定义（控制块的外观、交互、类型） #

通过Blockly.Blocks对象注册块的基础配置，明确块的展示文字、输出类型、提示信息：

Blockly.Blocks['dom_get_body'] = {
  init: function () {
    // 块上显示的固定文字
    this.appendDummyInput().appendField('获取 <body> 元素');
    // 标记这是一个有返回值的块，返回值类型为自定义的DOMElement类型，用于后续块的类型校验
    this.setOutput(true, 'DOMElement');
    // 设置块的颜色为蓝色系，和其他通用逻辑块做视觉区分
    this.setColour(230);
    // 鼠标悬浮时的提示
    this.setTooltip('返回当前文档的根body DOM元素');
  }
};

2. 绑定代码生成规则 #

根据你需要生成的目标语言（以最常用的JavaScript为例），给块绑定对应的代码生成逻辑：

Blockly.JavaScript['dom_get_body'] = function (block) {
  // 块对应的可执行JS代码
  const code = 'document.body';
  // 值类型块需要返回 [代码字符串, 运算符优先级]，这里成员访问的优先级用Blockly内置的ORDER_MEMBER常量即可
  return [code, Blockly.JavaScript.ORDER_MEMBER];
};

如果你需要生成其他语言的DOM操作代码（比如Python配合PyQuery操作DOM），只需要按照相同格式给对应语言的生成器注册规则即可。

3. 将块加入Toolbox配置 #

修改Blockly初始化时的toolbox参数，新建DOM操作分类，把自定义块加入分类列表：

// Toolbox配置
const domToolboxConfig = {
  kind: 'categoryToolbox',
  contents: [
    // 你原有的其他分类：逻辑、循环、数学、文本...
    {
      kind: 'category',
      name: 'DOM操作',
      colour: 230,
      contents: [
        { kind: 'block', type: 'dom_get_body' }
        // 后续可在该分类下扩展更多DOM块：按ID获取元素、设置样式、绑定事件等
      ]
    }
  ]
};

// 初始化Blockly工作区
Blockly.inject('你的Blockly容器DOM ID', {
  toolbox: domToolboxConfig
});

扩展开发提示 #

后续开发其他DOM相关块时，统一用DOMElement作为类型标记即可：

• 需要传入DOM元素作为参数的块，把对应输入槽的校验类型设为DOMElement
• 返回DOM元素的块，输出类型统一设为DOMElement
  Blockly会自动做类型匹配校验，避免用户拼接出参数类型不合法的代码。

内容的提问来源于stack exchange，提问作者Noob_Coder