如何使用 javascript 查询添加到 DOM 的 SelectorAll 元素？

Question

我正在开发一个聊天应用程序，当我尝试将新元素添加到聊天室列表、查看它们并与它们交互而不重新加载页面时，我的问题就出现了。

我将 HTML 元素添加到具有 JavaScript 的列表中。

然后我尝试查询列表中的SelectorAll 元素。

可以选择在页面加载时从服务器加载的元素。

但是新创建的带有 JavaScript 的元素似乎没有被选中。

这是我如何尝试 select 我的元素，并在单击时为每个元素执行一些代码：

 document.querySelectorAll('.select-room').forEach(p => {
        p.onclick = () => { <my code here> })

已经在列表中的元素被选中就好了，我的代码执行得很好。

但是当我用 JavaScript 添加一个新元素时。 Even though the HTML of it looks just the same as the HTML of other existing elements, including the class by which it gets selected, the result is I can only select those after reloading the page.

有没有办法我可以监听对 DOM 所做的更改，以便在使用 JavaScript 添加具有相同 class 的新元素后，它们将像其他元素一样被选中，而无需重新加载页面？

这是我的问题的最小，完整，可重现的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mcr problem</title>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        // Clicking element in the list shows an alert.
        document.querySelectorAll(".clickable").forEach(li => {
          li.onclick = () => {alert("interaction!")};
        });

        // Clicking on button adds new element to the list
        document.querySelector("#add-btn").onclick = () => {
          newLi = document.createElement("li");
          newLi.classList.add("clickable");
          newLi.innerHTML = "New Item";
          document.querySelector("#parent-list").append(newLi);
        };
      });
    </script>
  </head>
  <body>
    <h1>List of items</h1>
    <button id="add-btn">Add</button>
    <ul id="parent-list">
      <li class="clickable" id="post-1">Item 1</li>
      <li class="clickable" id="post-2">Item 2</li>
      <li class="clickable" id="post-3">Item 3</li>
    </ul>
  </body>
</html>

Answer 1

未调用DOMContentLoaded警报的原因
此事件在 DOM 树 forms 即脚本正在加载时触发。 脚本在图像、CSS 和 JavaScript 等所有资源加载之前开始运行。 您可以将此事件附加到 window 或文档对象
并且当时查询选择器只有 class .clickable的 3 个节点，因此它仅适用于这 3 个元素。
在 javascript DOMNodeInserted
当脚本使用 appendChild()、replaceChild()、insertBefore() 等在 DOM 树中插入新节点时，它会触发。

 document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(".clickable").forEach((li) => { li.onclick = () => commonAlertMethod(); }); // Clicking on button adds new elemnt to the list document.querySelector("#add-btn").onclick = () => { newLi = document.createElement("li"); newLi.classList.add("clickable"); newLi.innerHTML = "New Item"; document.querySelector("#parent-list").append(newLi); }; }); document.addEventListener("DOMNodeInserted", () => { // Clicking element in the list shows an alert. document.querySelectorAll(".clickable").forEach((li) => { li.onclick = () => commonAlertMethod(); }); }); function commonAlertMethod() { alert("interaction;"); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <h1>List of items</h1> <button id="add-btn">Add</button> <ul id="parent-list"> <li class="clickable" id="post-1">Item 1</li> <li class="clickable" id="post-2">Item 2</li> <li class="clickable" id="post-3">Item 3</li> </ul> </body> </html>

如何使用 javascript 查询添加到 DOM 的 SelectorAll 元素？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-01 05:45:56

如何使用 javascript 查询添加到 DOM 的 SelectorAll 元素？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-01 05:45:56

解决方案1
1 已采纳 2020-06-01 05:45:56