QuerySelectorAll 使用 OOP 返回空节点列表

Question

我正在重建一个待办事项列表应用程序，并尝试使用面向对象编程，这对我来说是新的。我已经构建了任务部分，但我无法找到“删除”按钮。添加新任务时，右侧会显示一个很棒的字体图标。我正在尝试选择它们，但每次函数运行时我都会得到一个空的节点列表：

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 select

class 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);