Adobe Animate导出项目无法通过id/name访问JS生成的页面元素

访问不到目标对象的核心原因有两个：

• textfield_1这类文本对象不是DOM元素：Adobe Animate导出的Canvas项目中，普通文本、图形、动画片段都是通过CreateJS渲染在<canvas>标签上的，不会生成对应的DOM节点，用document.getElementById这类DOM API根本无法查询到。另外你写的选择器也存在语法错误，getElementById的参数直接传id字符串即可，不需要加#前缀，不过哪怕修正这个写法，也拿不到Canvas渲染的非DOM对象。
• 代码执行时机太早：你写在head标签里的脚本会在页面加载初始阶段立刻执行，此时Animate项目还在加载资源、初始化舞台，项目主实例exportRoot都还没创建，自然访问不到任何内部对象。

所有Canvas渲染的元素都是CreateJS显示对象，会作为属性直接挂载在项目主实例exportRoot上，你只需要在项目初始化完成后通过exportRoot访问即可，全程不需要修改会被覆盖的HelloWorld.js文件，所有自定义代码写在HelloWorld.html里就行。

操作步骤 #

1. 先清理HTML里的语法错误：你在head预留代码注释位置后面多写了一个多余的单引号和不匹配的});，先删掉这部分错误代码，避免脚本整体执行失败。
2. 找到HTML里handleComplete函数的末尾，在fnStartAnimation();这行之后添加自定义逻辑，这个执行节点代表所有资源加载完成、舞台和所有子元素都已经初始化完毕。

代码示例 #

修改后的handleComplete函数末尾代码如下：

AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();

    // 以下是自定义代码
    // 访问并修改textfield_1的文本
    console.log("文本实例：", exportRoot.textfield_1);
    exportRoot.textfield_1.text = "这是修改后的Text 1内容";

    // 其他文本对象修改方式完全一致
    exportRoot.textfield_2.text = "修改后的Text 2";
    exportRoot.textfield_3.text = "修改后的Text 3";

    // 也可以在这里绑定按钮事件，不需要改动生成的JS文件
    $("#SendInfoButton").on("click", function(){
      exportRoot.textfield_1.text = "点击Send按钮后更新的文本";
    });
}

• 只有an_Button这类UI组件是生成真实DOM节点挂载在dom_overlay_container里的，可以用jQuery或者DOM API访问，其余图形、文本、动画片段都是Canvas渲染的CreateJS对象，必须通过exportRoot的属性访问。
• 如果后续你在Animate里修改了文本对象的实例名，对应修改exportRoot后的属性名即可，自定义代码不会被Animate导出操作覆盖。
• 修改CreateJS文本的text属性后，舞台会在tick事件触发时自动重绘，不需要手动调用刷新方法。

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