访问DOM节点innerHTML返回undefined、getElementById返回null问题

• DOM加载时机错误
  你将初始化Picker的脚本写在了<head>标签内，脚本执行时<body>以及内部的所有元素（包括id为d0的节点）还没有被浏览器解析渲染，DOM树尚未构建完成，此时查询相关元素自然会返回空或者null。你后续加了[0]还是无法拿到值，就是因为执行脚本时getElementsByTagName('body')返回的HTMLCollection是空集合，取索引0得到的是undefined，访问innerHTML属性当然会报错。
• 方法误用风险
  getElementById是仅document对象拥有的方法，普通DOM元素节点没有该方法，如果你后续把入参改成某一个容器元素，调用getElementById也会失败。
• 参数命名混淆
  你的Picker构造函数注释标注入参是容器的id字符串，实际调用时传入的是document对象，参数命名containerId和实际传值不匹配，容易引发后续逻辑错误。

1. 调整脚本执行位置：把初始化Picker的代码移到</body>闭合标签之前，确保所有DOM元素加载完成后再执行逻辑：

<body>
  <!-- 原有页面内容 -->
  <script>
    const picker = new Picker(document);
  </script>
</body>

2. 保留head内的脚本，添加DOM加载完成监听：

document.addEventListener('DOMContentLoaded', function() {
  const picker = new Picker(document);
})

3. 修正getElementsByTagName的取值逻辑，先判断集合长度再取值，避免报错：

const bodyList = containerId.getElementsByTagName('body');
if (bodyList.length > 0) {
  console.log(bodyList[0].innerHTML);
}

4. 调整参数命名和注释，和实际传值匹配，避免歧义。

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