问jQuery/JS是返回实际的DOM节点，还是只返回对它们的引用？

EN

简言之：

• 一些JavaScript方法将引用返回到DOM节点。
• 一些JavaScript方法返回类似数组的对象，其中包含对DOM节点的引用。这些东西不是很大。
• jQuery返回一个包含对DOM节点的引用的对象。这些jQuery对象可能会变得相当大，取决于发出了多少链式调用。
• 实际的DOM节点实际上是“按值”返回的绝不可能。
• 引用本身的大小是很小。通常是指针的大小。

JavaScript：

• getElementById和querySelector(?)返回对DOM节点的引用。
• getElementsByClassName和getElementsByTagName返回live HTMLCollections。
• getElementsByName返回一个活动NodeList。
• getElementsByNameNS根据浏览器的不同返回一个活动的NodeList或一个活动的HTMLCollection。
• querySelectorAll返回一个非活动 NodeList。

HTMLCollection和NodeList包含对DOM节点的引用。它们似乎不是很大的物体。

​

​

活的与非活的

来自MDN

在某些情况下，NodeList是一个活动集合，这意味着DOM中的更改反映在集合中。例如，Node.childNodes是实时的： var parent = document.getElementById('parent')；var child_nodes = parent.childNodes；console.log(child_nodes.length)；//假设"2“child_nodes console.log(child_nodes.length)；//应输出"3” 在其他情况下，NodeList是一个静态集合，这意味着DOM中的任何后续更改都不会影响集合的内容。document.querySelectorAll返回一个静态NodeList。

​

​

jQuery

来自learn.jquery.com

jQuery对象是围绕一个或多个DOM元素的类似数组的包装器。要获得对实际DOM元素(而不是jQuery对象)的引用，您有两个选项。第一个(也是最快的)方法是使用数组表示法： $( "#foo“)0；//等效于document.getElementById( "foo”) 第二个方法是使用.get()函数： $( "#foo“).get( 0 )；//与上述相同，只是速度较慢。 您还可以不使用任何参数调用.get()来检索真正的DOM元素数组。

这个答案是错误的，请看下面的评论。

Document.getElementById()和依赖它的方法或包装器返回引用。

Document.querySelector()也是如此。

所有这些都来自于DOM4规范，它指出(强调我的)：

collection是一个表示DOM节点列表的对象。collection可以是live，也可以是static。除非另有说明，集合必须是live**.**

从编程的角度来看，这个概念很容易理解，您浪费更少的内存，并且不用花时间复制东西，从而导致更快的执行。

然而，对于Document.querySelectorAll()，我们有一个有趣的案例：

由NodeList方法返回的querySelectorAll()对象必须是static。

这意味着，正如MDN所说，那个Document.querySelectorAll()

返回所有匹配元素节点的非活动NodeList。

这意味着返回的集合不是对原始节点的一组引用，而是对在执行查询时表示节点的一组节点的引用。这意味着必须创建所有匹配节点的副本，并且不再使用对活动节点的引用。

来自jQuery网站：

…jQuery() --也可以写成$() --在DOM中搜索与提供的选择器匹配的任何元素，并创建引用这些元素的新jQuery对象

jQuery文档