时间戳

首页 > 解决方案 > 是否可以更新/刷新 NodeList？

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

问题描述

我有一个“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>

标签： javascriptdom

解决方案

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

在某些情况下，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>

推荐阅读