Dart编译为JS后querySelector无法找到DOM元素问题

脚本放在HTML的<head>标签内加载执行，浏览器是从上到下顺序解析HTML的：加载运行编译后的index.js时，<body>内的<p id="first-paragraph">元素还没被解析加入DOM树，此时调用querySelector('#first-paragraph')自然匹配不到目标元素，返回null。
DartPad能正常运行是因为平台内部自动做了DOM加载完成后再执行入口代码的处理，不需要手动控制执行时机。

任选一种即可修复问题：

• 将脚本标签移动到</body>闭合标签之前，保证所有DOM元素解析完成后再加载执行脚本：

<!-- index.html -->
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <p id="first-paragraph">Target.</p>
        <!-- 所有DOM元素写在脚本前面 -->
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

• 给head内的脚本标签添加defer属性，让浏览器异步下载脚本文件，等整个DOM解析完成后再执行脚本：

<script type="text/javascript" src="index.js" defer></script>

• 在Dart代码中监听DOM就绪事件，等DOM加载完成后再执行元素查询逻辑：

// index.dart
import 'dart:html';

void main() {
  // 监听DOM内容加载完成，不需要等图片、样式等外部资源加载，响应更快
  document.onDomContentLoaded.listen((event) {
    print(querySelector('#first-paragraph')?.innerText);
  });
}

补充：你使用的dart compile js index.dart -o index.js -O0编译命令没有问题，-O0是调试级别的优化配置，不会影响DOM查询逻辑的正常执行。

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