Question

我有一个“ Maindiv”（div），其中包含4个元素。让我们考虑元素属于一个名为“ Subdiv”的类。当我用“ Maindiv.getElementsByClassName（'Subdiv'）。length;”查询“ Subdivs”的数量时，它会按预期返回4。但是，如果我创建一个新的“ Subdiv”并将其附加到我的主“ Maindiv”中并立即查询长度，它将返回4（这是错误的），直到NodeList被更新（通常在附加了20-50毫秒后） new元素）返回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可以是静态或“实时”节点集合。

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

是否可以更新/刷新NodeList？

1 个答案: