Question

做一些有关实时或静态DOM收集的研究。我得到的是，当DOM中的更改反映在集合中时，NodeList是一个实时集合。如果不是这种情况，它是一个静态集合。

正在阅读以下问题：

When is NodeList live and when is it static?

答案表明HTMLCollection始终在线，NodeList可以在线或静态。

但是情况仍然如此吗？我似乎无法复制静态集合。例如，document.querySelectorAll应该（源：前面给出的链接的答案）返回静态集合，但在以下示例中对我来说似乎是实时的：

const elements = document.querySelectorAll('.hi');

function change() {
  document.querySelectorAll('.hi')[0].style.backgroundColor = 'red';
}

function checkvalue() {
  console.log(elements[0].style.backgroundColor);
}

<div class="hi">test</div>
<div class="hi">test</div>

<button onclick="change()">change</button>
<button onclick="checkvalue()">checkvalue</button>

在此示例中，元素NodeList仍更新为红色，因此元素NodeList似乎处于活动状态。

问题：

是否仍然存在实时和静态DOM集合，或者如今仅存在实时的DOM集合？如果仍然存在静态实例，请举个例子。

Answer 1

您误解了什么是实时的/静态的：是集合的是实时的还是静态的，而不是集合中的元素。

如果您这样做：

const spans = document.getElementsByTagName("span");

和以后，您将新的span添加到DOM，spans.length的值将增加，因为新的跨度已添加到集合中； HTMLCollection个实例为活动。

但是，如果您这样做：

const spans = document.querySelectorAll("span");

和以后，您将新的span添加到DOM，spans.length的值将不会增加，因为新的跨度不会没有添加到列表中； NodeList中的querySelectorAll是静态。

元素是实时的。

示例：

const coll = document.getElementsByTagName("span");
const list = document.querySelectorAll("span");
console.log("(before) coll.length = " + coll.length);
console.log("(before) list.length = " + list.length);

console.log("Adding another span");
document.body.appendChild(
  document.createElement("span")
);
console.log("(after)  coll.length = " + coll.length);
console.log("(after)  list.length = " + list.length);

<span></span>

DOM确实没有静态元素。如果您需要类似的内容，则可以复制元素，以使它们不再位于DOM中，因此（对副本进行的）更改不会影响DOM中的元素：

const elements = Array.prototype.map.call(
    document.querySelectorAll('.hi'),
    element => element.cloneNode(true)
);

示例：

const elements = Array.prototype.map.call(
  document.querySelectorAll('.hi'),
  element => element.cloneNode(true)
);

function change() {
  document.querySelectorAll('.hi')[0].style.backgroundColor = 'red';
}

function checkvalue() {
  console.log(elements[0].style.backgroundColor);
}

<div class="hi">test</div>
<div class="hi">test</div>

<button onclick="change()">change</button>
<button onclick="checkvalue()">checkvalue</button>

实时和静态DOM元素

问题：

1 个答案: