javascript - 是否可以更新/刷新 NodeList？

Question

我有一个“Maindiv”(div)，其中包含 4 个元素。让我们考虑属于一个名为“Subdiv”的类的元素。当我使用“Maindiv.getElementsByClassName('Subdiv').length;”查询“Subdivs”的数量时，它按预期返回 4。但是，如果我创建一个新的“Subdiv”并将其附加到我的主“Maindiv”并立即查询长度，它将返回 4(这是错误的)，直到更新 NodeList(通常在附加后 20-50 毫秒新元素)它返回 4。最后在这个间隔之后它返回正确的数字(5)。我的问题是，是否有一种方法可以在我添加新元素后更快地更新/刷新 NodeList？

<div>
  <div id='Maindiv'>
    <div class='Subdiv' id='Subdiv1'></div>
    <div class='Subdiv' id='Subdiv2'></div>
    <div class='Subdiv' id='Subdiv3'></div>
    <div class='Subdiv' id='Subdiv4'></div>
  </div>
<button type='button' onclick='CreateNewSubdivs()'>Create Subdiv</button>
</div>

    <script>
function CreateNewSubdivs(){
var MainDiv = document.getElementById('Maindiv');
var SubdivsLength= MainDiv.getElementsByClassName('Subdiv').length;
var NewSubDiv = document.createElement('div');
var NewCopyNumber = SubdivsLength+1;
var NewSubDivID = 'Subdiv'+NewCopyNumber;
NewSubDiv.setAttribute('class', 'Subdiv');
NewSubDiv.setAttribute('id', NewSubDivID );
MainDiv.appendChild(NewSubDiv );
var SubdivsLength= MainDiv .getElementsByClassName('Subdiv').length;
console.log(SubdivsLength);  /// This number is wrong until 20-50 millisec later
}
</script>

Answer 1

NodeList 可以是静态或“实时”节点集合。

In some cases, the NodeList is live, which means that changes in the DOM automatically update the collection.

例如Node.childNodes

In other cases, the NodeList is static, where any changes in the DOM does not affect the content of the collection.

例如querySelectorAll()

返回的列表

来源:https://developer.mozilla.org/en-US/docs/Web/API/NodeList

---

正如您在本例中看到的，我设置了一次对 childNodes 的引用。一旦 DOM 发生变化，它就会保持最新。

const list = document.querySelector('#main');
const items = list.childNodes;

setInterval(() => {
  const item = document.createElement('li');
  item.innerHTML = '🌯';
  list.appendChild(item);
  console.log(items.length);
}, 500);

<ul id="main"></ul>

---

getElementsByClassName 还返回节点的实时集合:

const list = document.querySelector('#main');
const spans = list.getElementsByClassName('burrito');

setInterval(() => {
  const item = document.createElement('li');
  item.innerHTML = '<li><span class="burrito">🌯</span></li>';
  list.appendChild(item);
  console.log(spans.length);
}, 1);

<ul id="main">
</ul>