Javascript 在添加元素后动态更新querySelectorAll节点列表

我有一个函数，可以通过document.querySelectorAlltheClass+'>*'选择特定类中的所有元素；但是，如果在这个DOM块中添加了某些元素，但在启动函数之后，则需要侦听。 以下是一个例子：

function controlElems(cl){
  var nl = document.querySelectorAll(cl + ' > *');
  console.log(nl.length);
}

document.addEventListener("DOMContentLoaded", function() {
  var list = document.querySelector('.list');
  controlElems('.list');

  // This element added after controlElems() 
  // won't be inside the nodeList

  var newElm = document.createElement('li');
  newElm.id = "id5";
  newElm.innerHTML ="Item 5: after";
  list.appendChild(newElm);
});

---

还有一个例子

看一看变异观察者：谢谢！此外，我正在尝试MutationEvents，并了解到存在一些pref问题：如果我没有弄错的话，MutationObserver是MutationEvent的替代品，因此您应该检查您针对的浏览器是否支持该功能！你是对的。当然，我会测试并更新问题。再次感谢！在最后的FF中，Safari和Chrome MutationEvent运行良好。