如何将脚本中通过ID获取元素改为通过标签获取body元素？

架构老林

2026-5-26

适配body标签替换container ID的解决方案

嘿，我看到你在调整CodePen脚本适配body标签时遇到了点小问题——其实问题出在getElementsByTagName的返回值上，咱们来一步步解决它：

问题根源：document.getElementsByTagName("body")返回的是一个HTMLCollection（类数组集合），哪怕页面里只有一个body元素，它也不会直接返回单个DOM节点。而原来的代码里document.getElementById("container")返回的是单个元素，直接替换后，后续代码调用container的属性/方法时会出错。
正确的body元素获取方式：
推荐两种更靠谱的写法，选任意一种都可以：
1. 用document.body：这是获取body元素最直接的方式，浏览器原生提供，性能最优
```
var container = document.body, w = window.innerWidth, h = window.innerHeight;
```
2. 用document.querySelector("body")：更灵活的选择，语法和CSS选择器一致，适合需要更复杂选择的场景
```
var container = document.querySelector("body"), w = window.innerWidth, h = window.innerHeight;
```
额外注意事项：
别忘了检查body元素的默认样式，浏览器通常会给body加默认的margin和padding，可能导致宽高计算不符合预期。可以在CSS里添加：
```
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 如果需要全屏效果的话 */
}
```
确保body的尺寸能完全匹配窗口大小，和原来的container行为一致。