Javascript DOM 使用 javascript 插入 dom 后捕获

Question

我有一个关于 DOM 操作的问题，比如说我使用这个函数插入一个网格：

const grid__container = document.querySelector('.grid__container');

function createVertexes() {
    for (let i = 0; i < 9; i++) {
        const grid = document.createElement("div");
        grid.setAttribute('class', "vertex");
        grid.setAttribute('id', i+1);
        grid__container.appendChild(grid);

    }
}

之后，我尝试使用 document.querySelectorAll("vertex") 获取带有 class“vertex”的所有顶点，但它不起作用：

const vertexes = document.querySelectorAll('.vertex');

此 returns 的控制台日志：

[]

但这行得通：

const vertexes = grid__container.childNodes;

console.log 实际上 returns 所有 9 个 div

我看到区别在于 grid__container 是在我的 HTML 文件中预定义的，但是我以自上而下的方式编写了 querySelectorAll 方法，所以我不明白为什么查询选择器不工作，因为我创建了元素然后试图抓住它，有人知道为什么吗？

我只知道这叫做DOM-manipulation，不知道这个错误的确切名称，我对javascript很陌生，请帮忙。

我希望控制台注销 9 个 div，但我在这里使用 querySelectorAll 的顶点却注销了长度为 0 的节点列表 <NodeList: length 0>

// grab the main container 
const grid__container = document.querySelector('.grid__container');
const mole = document.querySelector(".mole");

const timeLeft = document.querySelector("#time__left");
const score = document.querySelector("#score");


let result = 0;


function createVertexes() {
  for (let i = 0; i < 9; i++) {
    const grid = document.createElement("div");
    grid.setAttribute('class', "vertex");
    grid.setAttribute('id', i + 1);
    grid__container.appendChild(grid);

  }
}

// const vertexes = grid__container.childNodes;
const vertexes = document.querySelectorAll('.vertex');
console.log(vertexes);

function randomSquare() {
  vertexes.forEach(vertex => {
    vertex.classList.remove('mole')
    console.log(vertex);
  })

  let randomVertex = vertexes[Math.floor(Math.random() * 9)]
  randomVertex.classList.add('mole');

}

createVertexes();
randomSquare();

* {
  box-sizing: border-box;
}

.grid__container {
  width: 600px;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
}

.vertex {
  height: 200px;
  width: 200px;
  border: solid black 1px;
}

.mole {
  background-color: burlywood;
}

<!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">
  <title>Whac-a-mole</title>
  <link rel="stylesheet" href="./styles.css">
  <script src="./app.js" defer></script>
</head>

<body>
  <h2>Your score:</h2>
  <h2 id="score">Score</h2>

  <h2>Time left:</h2>
  <h2 id="time__left">Time left</h2>
  <div class="grid__container"></div>

</body>

</html>

Answer 1

如果您拼写正确并且运行代码在 DOM 完成后并在您需要时获得顶点

，您的代码就可以工作

此外，直到 randomSquare 具有运行

之后，.mole 才可用

window.addEventListener("DOMContentLoaded", function() {
  // grab the main container 
  const grid__container = document.querySelector('.grid__container');
  const timeLeft = document.querySelector("#time__left");
  const score = document.querySelector("#score");
  let result = 0;

  for (let i = 0; i < 9; i++) {
    const grid = document.createElement("div");
    grid.setAttribute('class', "vertex");
    grid.setAttribute('id', i + 1);
    grid__container.appendChild(grid);
  }

  function randomSquare() {
    const vertexes = document.querySelectorAll('.vertex');
    vertexes.forEach(vertex => {
      vertex.classList.remove('mole')
    })
    let randomVertex = vertexes[Math.floor(Math.random() * 9)]
    randomVertex.classList.add('mole');
  }
  randomSquare();
  
  //   const mole = document.querySelector(".mole");

  
})

* {
  box-sizing: border-box;
}

.grid__container {
  width: 600px;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
}

.vertex {
  height: 200px;
  width: 200px;
  border: solid black 1px;
}

.mole {
  background-color: burlywood;
}

<h2>Your score:</h2>
<h2 id="score">Score</h2>

<h2>Time left:</h2>
<h2 id="time__left">Time left</h2>
<div class="grid__container"></div>

Javascript DOM 使用 javascript 插入 dom 后捕获

Javascript DOM capturing after using javascript to insert dom

javascript

dom