NodeList何时在线，何时静态？ [英] When is NodeList live and when is it static?

问题描述

来自 NodeList 的MDN：

在某些情况下，NodeList是一个实时集合，这意味着DOM中的
变化反映在集合中。例如，
Node.childNodes是直播的：

  var parent = document.getElementById（'parent'）; 
 var child_nodes = parent.childNodes; 
 console.log（child_nodes.length）; //假设2
 parent.appendChild（document.createElement（'div'））; 
 console.log（child_nodes.length）; //应输出3
  

在其他情况下，
NodeList是一个静态集合，意味着
中的任何后续更改都不会影响集合的内容。
document.querySelectorAll返回一个静态的NodeList。

所以....有点恼人！是否有任何中心引用的方法返回实时列表，哪些返回静态列表，而不必单独检查DOM API的各个部分？是否有任何规则在这里工作？

解决方案

不，但似乎没有一个标准的惯例来确定它。

document.getElementsByClassName（）是一个 HTMLCollection ，并且是活的。

document.getElementsByTagName（）是 HTMLCollection ，并且是直播的。

document.getElementsByName（）是一个 NodeList 并且是活的。
$ b document.querySelectorAll（）是 NodeList 和是不是直播。

HTMLCollection s似乎永远是直播的

HTMLCollection是一个节点列表。一个单独的节点可以是
，可以通过序号索引或节点的名称或id属性访问。

注意：HTML DOM中的集合被假定为实时含义那
它们在底层文档变为
时自动更新。

http://www.w3.org/TR/DOM-Level-2 -HTML / html.html＃ID-75708506

因此，HTML集合在DOM中始终是，而一个 nodeList 是一个更通用的构造，可以或不可以在DOM中。 $ b

一个NodeList对象是一个节点集合...
NodeList接口提供了一个有序的
节点集合的抽象，而没有定义或约束如何实现这个
集合。

http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live

听起来不错，对吗？

lockquote

集合是一个对象，代表DOM节点的列表。
集合可以是实时或静态的。除非另有说明，
的收藏必须是实时的。

http://www.w3.org/TR/2012/WD-dom-20120405/#collections

因此，静态集合将在规范中进行说明。因此，通过这个逻辑， document.querySelectorAll（）是一个集合，但它在DOM中不是。因为虽然集合可能会或可能不会实时生成，但DOM中的集合必须是实时的......这种区别不是很有用。

，这是确定集合是否存在的快速方法;它将集合成员的一个克隆附加到 DOM （所以它将匹配选择器），并检查长度是否改变，然后将其删除（如此该页面不受影响）

DEMO

  function isLive（collection）{if（collection.length< 1）{return undefined; // inconclusivw} let body = document.getElementsByTagName（'body'）[0];让l1 = collection.length;让clone = collection.item（0）.cloneNode（）; clone.style.display =none; body.appendChild（克隆）;让l2 = collection.length; body.removeChild（克隆）;返回l2！== l1;} divs1 = document.getElementsByClassName（'c'）; console.log（document.getElementsByClassName（'c'）：，divs1.toString（））; //[object HTMLCollection]divs2 = document.querySelectorAll（'。c'）; console.log（document.querySelectorAll（'。c'）：，divs2.toString（））; //[object NodeList]divs3 = document.getElementsByName（'mydiv'）; console.log（document.getElementsByName（'mydiv'）：，divs3.toString（））; //[Node NodeList] console.log（isLive（divs1），isLive（divs1））; //trueconsole.log(\"isLive(divs2)\",isLive(divs2））; //falseconsole.log(\"isLive(divs3)\",isLive(divs3））; // true  

< html>< body> < div class =cname =mydiv> C1< / div> < div class =cname =mydiv> C2< / div>< / body>< / html>

From MDN for NodeList:

In some cases, the NodeList is a live collection, which means that changes in the DOM are reflected in the collection. For example, Node.childNodes is live:

 var parent = document.getElementById('parent');
 var child_nodes = parent.childNodes;
 console.log(child_nodes.length); // let's assume "2"
 parent.appendChild(document.createElement('div'));
 console.log(child_nodes.length); // should output "3"

In other cases, the NodeList is a static collection, meaning any subsequent change in the DOM does not affect the content of the collection. document.querySelectorAll returns a static NodeList.

So .... kind of annoying! Is there any central reference for which methods return live lists and which ones return static lists, without having to check individually for all the various parts of the DOM API? Is there any rule at work here?

解决方案

Information about each method details if it is live or not, but there does not seem to be a standard convention for determining it.

document.getElementsByClassName() is an HTMLCollection, and is live.

document.getElementsByTagName() is an HTMLCollection, and is live.

document.getElementsByName() is a NodeList and is live.

document.querySelectorAll() is a NodeList and is not live.

HTMLCollections appear to always be live

An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.

Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506

So, HTML Collections are always "in the dom," whereas a nodeList is a more generic construct that may or may not be in the DOM.

A NodeList object is a collection of nodes... The NodeList interface provides the abstraction of an ordered collection of nodes, without defining or constraining how this collection is implemented. NodeList objects in the DOM are live.

http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live

Sounds good, right?

A collection is an object that represents a lists of DOM nodes. A collection can be either live or static. Unless otherwise stated, a collection must be live.

http://www.w3.org/TR/2012/WD-dom-20120405/#collections

So static collections will be indicated as such in the spec. So, by this logic, document.querySelectorAll() is a collection, but it is not in the DOM. Because while collections may or may not be live, collections in the DOM must be live... This distinction is not super helpful.

Well, here is a quick method to determine if a collection is live; it appends a clone of a member of the collection to the DOM (so it will match the selector), and checks to see if the length changed, and then removes it (so the page is not affected)

DEMO

function isLive(collection) {
  if (collection.length < 1) {
    return undefined; //inconclusivw 
  }
  let body = document.getElementsByTagName('body')[0];
  let l1 = collection.length;
  let clone = collection.item(0).cloneNode();
  clone.style.display = "none";
  body.appendChild(clone);
  let l2 = collection.length;
  body.removeChild(clone);
  return l2 !== l1;
}



divs1 = document.getElementsByClassName('c');
console.log("document.getElementsByClassName('c'):",divs1.toString()); //"[object HTMLCollection]"


divs2 = document.querySelectorAll('.c');
console.log("document.querySelectorAll('.c'):     ",divs2.toString()); //"[object NodeList]"

divs3 = document.getElementsByName('mydiv');
console.log("document.getElementsByName('mydiv'): ",divs3.toString()); //"[object NodeList"]

console.log("isLive(divs1)",isLive(divs1)); //true
console.log("isLive(divs2)",isLive(divs2)); //false
console.log("isLive(divs3)",isLive(divs3)); //true

<html>

<body>
  <div class="c" name="mydiv">C1</div>
  <div class="c" name="mydiv">C2</div>
</body>

</html>

这篇关于NodeList何时在线，何时静态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！