Можно ли обновить / обновить NodeList?

Question

У меня есть "Maindiv" (div) с, скажем, 4 элементами в нем. Давайте рассмотрим элементы, принадлежащие к классу под названием «Subdiv». Когда я запрашиваю количество «Subdivs» с помощью «Maindiv.getElementsByClassName ('Subdiv'). Length;» , он возвращает 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

A NodeList может быть статической или «живой» коллекцией узлов.

В некоторых случаях NodeList является живым, что означает, что изменения в DOM автоматически обновляют коллекцию.

например, Node.childNodes

В других случаях NodeList является статическим, когда любые изменения в DOM не влияют на содержимое коллекции.

например, список, возвращаемый 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>