Question

我需要添加一个侦听器，以跟踪元素/ div下元素的添加/删除。

我已将onchange侦听器添加到父元素，但这没有用。

<div class="class1" onchange="myfunc(this)">
    <input name="in"/>
    <!-- Track element addition/deletion here -->
</div>

我需要在div中添加一个侦听器，以侦听div中元素的添加/删除（追加/删除）。

Answer 1

如果要跟踪另一个div内某个div的移除或添加，则应跟踪父级内子div的数量。

您可以通过多种方式执行此操作，例如使用属性childNodes：

element.childNodes

它将为您提供父div内的所有div，您现在可以跟踪div内的div的数量。

要轻松完成此任务，您可以使用reactjs。在这里，您可以使用生命周期方法

Answer 2

onchange 事件不会跟踪对DOM的更改。幸运的是，JavaScript提供了一个功能强大的API来完成这项工作：MutationObserver。

用法非常简单：

引用要跟踪更改的元素

var target = document.getElementsByClassName('class1');

创建MutationObserver的新实例

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList") {
      console.log("an element has been added!");
    }
  });
});

告诉它跟踪对DOM的更改-通过 childList 属性

完成

var config = {
  childList: true,
};

开始观察

observer.observe(target[0], config);

这是一个完整的例子：

var target = document.getElementsByClassName('class1');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList") {
      console.log("an element has been added!");
    }
  });
});

var config = {
  childList: true,
};
observer.observe(target[0], config);

function addDiv() {
  var theDiv = document.createElement("div");
  theDiv.innerText = "I'm a div";
  target[0].appendChild(theDiv);
}

<div class="class1">
  <input name="in" />
</div>
<button onclick="addDiv()">
Add
</button>

如何在特定div下跟踪HTML元素上的添加？

2 个答案: