javascript - 现场采集奇怪行为？

Question

为什么 li 元素仍然在实时集合中，尽管它们不在 DOM 中？

'use strict';

let lis = document.body.firstElementChild.getElementsByClassName('li');

document.body.firstElementChild.remove();

console.log( lis.length );

<ul>
    <li class="li"></li>
    <li class="li"></li>
    <li class="li"></li>
</ul>

Answer 1

该集合是 document.body.firstElementChild 的后代，因此即使该元素不再存在于 DOM 中，该元素仍然存在，并且有与该类名称匹配的子级。

要中断连接，您必须从 ul 中删除 .li。 (从文档中删除 ul 不会破坏 ul 与其 li 之间的连接)

const lis = document.body.firstElementChild.getElementsByClassName('li');
document.querySelector('li').remove();
console.log(lis.length);

<ul>
  <li class="li"></li>
  <li class="li"></li>
  <li class="li"></li>
</ul>