javascript - querySelector() 返回静态节点列表或事件节点列表

Question

MDN 指定的 querySelectorALL() 不支持事件节点并且仅返回静态节点。 MDN querySelectorALL

querySelector() 是否支持活节点 MDN 没有指定任何关于它的信息 MDN querySelector

Answer 1

querySelectorAll返回静态 list (具体来说，静态 NodeList )，而(比如说)getElementsByTagName返回一个live list(具体来说，一个 live HTMLCollection )。¹ 这是静态或实时的 list，而不是节点/元素列表。

querySelector 返回的元素是 DOM 中的元素(来自 querySelectorAll 的列表中的元素也是如此)。它们是“实时的”，而不是快照或克隆——例如，如果它们发生了变化，您可以通过来自 querySelector 的引用来查看这些变化。/querySelectorAll .

例子:

const element = document.querySelector("input");
const staticList = document.querySelectorAll("input");
const liveList = document.getElementsByTagName("input");

element.addEventListener("input", () => {
  // Both of these are references to the live node in the DOM
  console.log(element.value);
  console.log(staticList[0].value);
});

document.getElementById("del").addEventListener("click", () => {
  // Removing the input
  document.body.removeChild(document.querySelector("input"));
  // It's still on the static list
  console.log("staticList.length = " + staticList.length); // 1
  // It's off the live list now
  console.log("liveList.length = " + liveList.length); // 0
  // Since we still have a reference to it, we can still see it's value
  console.log(element.value); // "what you typed"
});

Type something: <input type="text">
<br>then click this: <button id="del" type="button">Delete</button>

---

¹ HTMLCollection实例始终处于事件状态。² NodeList实例可以是实时的或静态的(快照)。 NodeList你从querySelectorAll得到是静态的，但是 NodeList你从(比如说)childNodes Element 的属性是活的。这是一个例子:

const container = document.getElementById("container");

console.log(`Get a static list of the container's elements`);
const list = container.querySelectorAll("*");
console.log(`It's a NodeList:`);
console.log(list.constructor.name); // "NodeList"
console.log(`With one element in it:`);
console.log(list.length); // 1

console.log(`Get a live list of children`);
const children = container.childNodes;
console.log(`It's also a NodeList:`);
console.log(children.constructor.name); // "NodeList"
console.log(`With one element in it (so far):`);
console.log(children.length); // 1

console.log(`Add a new child`);
const p = document.createElement("p");
container.appendChild(p);

console.log(`The static list still has one element:`);
console.log(list.length); // 1
console.log(`But the live list has two:`);
console.log(children.length); // 2

.as-console-wrapper {
    max-height: 100% !important;
}

<div id="container"><p></p></div>

² “HTMLCollection 实例始终处于事件状态。” - 实际上，规范并没有这么说。我的声明基于两件事:

1. MDN是这么说的(但是 MDN 虽然质量很高，但并不总是 100% 正确)。
2. 所有当前 HTMLCollection规范描述的实例是实时的，没有新的 HTMLCollection将来会增加实例；这是一种遗留类型。如果添加任何新集合，它们将被定义为 Sequence<T> 实例或 NodeList实例。