动态添加元素后更新querySelectorAll nodeList

Question

我有一个函数通过document.querySelectorAll(theClass + ' > *');选择特定类中的所有元素但需要监听以防在此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);
});

例如here