QuerySelectorAll 使用 OOP 返回空节点列表

Question

我正在重建一个待办事项列表应用程序，并尝试使用面向对象编程，这对我来说是新的。我已经构建了任务部分，但我无法找到&ldquo;删除&rdquo;按钮。添加新任务时，右侧会显示一个很棒的字体图标。我正在尝试选择它们，但每次函数运行时我都会得到一个空的节点列表：Codepen：待办事项列表重现：添加任务，然后检查控制台。您将看到一个空的节点列表。我尝试过的：现在，我正在尝试简化console.log该元素。console.log(buttons)每次该方法运行时我都会运行addTask()。这是完整的 JS：const submit = document.querySelector("#commit-task"),  results = document.querySelector("#task-results"),  input = document.querySelector("#input-task"),  buttons = document.querySelectorAll(".fa-times");  // These are what I'm trying to selectclass Task {  constructor(task) {    this.taskText = task;  }  addTask() {    const text = input.value;    ui.clearInput();    const taskBody = `<div class="task">        <span>${text}</span>            <span>              <i class="fas fa-check" style="color: green;"></i>              <i class="fas fa-times" style="color: red;"></I> //This is the element I'm trying to select            </span>    </div>`;    results.innerHTML += taskBody;    console.log(buttons); //Here's where the Console.log statement is run  }}class UI {  clearInput() {    input.value = "";    input.focus();  }}const newTask = new Task();const ui = new UI();// Add Event Listeners:submit.addEventListener("click", () => {  newTask.addTask(); //Here is when addTask() is run.});input.addEventListener("keyup", (e) => {  if (e.keyCode === 13) {    newTask.addTask();  }});为什么 JavaScript 认为这些按钮不在 DOM 中？提前致谢。

Answer 1

document.querySelectorAll(".fa-times");在第一次分配期间执行，并且由于初始化期间没有图标，所以按钮相当于一个空的 NodeList。

为了检查当前状态，您需要重新运行查询。

只需将按钮声明为let buttons = document.querySelectorAll(".fa-times");

然后重新运行查询并将其最新结果分配给按钮变量，然后再记录它：

buttons = document.querySelectorAll(".fa-times");

console.log(buttons);