javascript - 动态和静态 DOM 元素

Question

做一些关于动态或静态 DOM 集合的研究。当 DOM 中的更改反射(reflect)在集合中时，我得到的是 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 集合，或者现在只存在动态的？如果静态的仍然存在，请举个例子。

Answer 1

您误解了什么是事件/静态:事件或静态的是集合，而不是集合中的元素。

如果你这样做:

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

和之后，您向 DOM 添加一个新的 span，spans.length 的值将增加，因为添加了新的 span到集合； HTMLCollection 实例是实时。

但如果你这样做:

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

之后，您向 DOM 添加一个新的 span，spans.length 的值将不 增加，因为新的跨度没有添加到列表中； querySelectorAll 中的 NodeList 是static。

无论哪种方式，元素都是活的。

例子:

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>