使用forEach循环为第n个子元素赋值时遇Uncaught TypeError问题

问题描述 #

尝试通过循环批量更新多个第n个子元素，控制台报错：

Uncaught TypeError: document.querySelector(...) is null.

页面仅显示一处“Hello World!”，虽参考变量使用示例编写代码，但无法定位问题。

原JS代码 #

function randomNumberArr() {
  let arr = Array.from({ length: 5 }, () => Math.floor(Math.random() * 31));
  return arr;
}

function displayData(arr) {
  let i = 0;
  arr.forEach(function () {
    i++;

    // 可行的测试代码：
    //document.querySelector(`div:nth-child(2)`).innerHTML = "Hello World!";
    // 不可行的代码：
    document.querySelector(`div:nth-child(${i})`).innerHTML = "Hello World!";
  });
}
let arrNumbers = randomNumberArr();

displayData(arrNumbers);

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div id="bars">
        <div id="bar"></div>
        <div id="bar"></div>
        <div id="bar"></div>
        <div id="bar"></div>
        <div id="bar"></div>
    </div>
<script src="test.js"></script>
</body>
</html>

问题原因 #

document.querySelector(div:nth-child(${i}))是在整个文档范围内查找第i个<div>元素：

• 当i=1时，选中的是<div id="bars">这个父容器，设置它的innerHTML会直接覆盖掉里面所有子<div>元素。
• 后续循环中，原有的子<div>已经被删除，自然找不到第2、3、4、5个<div>，因此抛出null错误。
• 测试代码中div:nth-child(2)能工作，是因为此时选中的是父容器内的第一个子<div>，还未触发父容器的内容覆盖。

另外补充：HTML中多个元素使用相同的id="bar"不符合规范，id必须唯一，建议改为class="bar"。

解决方案 #

方案1：限定查找范围到父容器 #

修改选择器，指定在#bars容器内查找子<div>：

function displayData(arr) {
  let i = 0;
  arr.forEach(function () {
    i++;
    // 限定在#bars容器内查找第i个子div
    document.querySelector(`#bars div:nth-child(${i})`).innerHTML = "Hello World!";
  });
}

方案2：一次性获取所有子元素（更高效） #

通过querySelectorAll批量获取目标元素，再循环更新，避免多次DOM查询：

function displayData(arr) {
  // 获取#bars下的所有子div
  const bars = document.querySelectorAll('#bars div');
  bars.forEach(bar => {
    bar.innerHTML = "Hello World!";
  });
}

修正HTML的id重复问题 #

将重复的id="bar"改为class="bar"：

<div id="bars">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

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