使用 javascript 创建网格而不使用 display:grid

Question

我目前正在 odin 项目上制作蚀刻草图。这是我想出的代码。

const container = document.querySelector(".container");
const input = document.querySelector("input");
const submitBtn = document.querySelector("button");

function createGrid() {
    let value=input.value;
    for (let i = 0; i < value; i++) {

        
        const createDivRow = document.createElement("div");
        createDivRow.classList.add("gridrow")
         createDivRow.textContent = i;
        container.appendChild(createDivRow);
    }
    
}

function createGridItems() {
    let value = input.value;
    for (let i = 0; i < value; i++) {
        const divRow = document.querySelectorAll(".gridrow");
        const createDivItem = document.createElement("div");
        createDivItem.textContent = "aa";
        divRow.appendChild(createDivItem);
    }
}

submitBtn.addEventListener("click", createGrid);
submitBtn.addEventListener("click", createGridItems);

在 createGrid() 函数中，我的目标是创建 n 个 div（n 是来自输入文本框的用户输入），我已经成功了。结果是容器中有 n 个 class="gridrow" 的 div。

在 createGridItems() 函数中，我想将相同数量的 div“n”放入每个 .gridrow 行（我已为其指定了变量 divRow）。

我尝试声明

const divRow = document.querySelector(".gridRow")

，结果是第一个 .gridrow div 中有 n 个 div，这几乎就是我想要的。

所以，我想我应该声明

const divRow = document.querySelectorAll(".gridrow")

来定位我创建的所有 .gridrow 并将 n 个 div 放入每个 .gridrow div 中。结果，我得到的只是空的 n 个 .gridrow div，没有我想要的 div。

谁能告诉我哪里出了问题？我确信上面的代码可以工作，因为当我声明 divRow = document.querySelectorAll(".gridrow") 时，我已经定位了所有 .divrow div。

谢谢！

Answer 1

那是因为

querySelectorAll()

返回静态（非实时）

NodeList

:

根据 MDN：

Document 方法

querySelectorAll()

返回静态（非实时） NodeList 表示与 指定的选择器组。

虽然 NodeList 不等于数组，它被称为

array-alike

但当它是静态的时，DOM 的任何变化都不会影响节点集合的内容。

根据 MDN：

静态节点列表

在其他情况下，NodeList 是静态的，其中 DOM 中的任何更改都不会影响集合的内容。 无处不在的 document.querySelectorAll() 方法返回一个静态 节点列表。

也就是说，您必须先将 NodeList 转换为数组，然后再进行更改，将其转换为数组的最简单方法是使用展开运算符，如下所示：

function createGridItems() {
  let value = input.value;
  for (let i = 0; i < value; i++) {
    // wrap with brackets, then use spread
    const divRow = [...document.querySelectorAll(".gridrow")];
    const createDivItem = document.createElement("div");
    createDivItem.textContent = "aa";
    divRow.appendChild(createDivItem);
  }
}