jQuery/JS是否返回实际的DOM节点,或仅仅引用它们？

Question

我问的原因是因为我想在我拥有的这个巨大的多维数组中存储一堆DOM节点.

成本:占用内存空间.问题是空间有多大,这取决于我是获得引用还是实际的DOM节点.

好处:1)它将使我的代码更简单.2)我可以避免遍历,而只是从我的数组中引用DOM节点.

思考？

Answer 1

简而言之：

• 一些 JavaScript 方法返回对 DOM 节点的引用。
• 一些 JavaScript 方法返回包含对 DOM 节点的引用的类似数组的对象。这些物体不是很大（？）。
• jQuery 返回一个 jQuery 对象，其中包含对 DOM 节点的引用。这些 jQuery 对象可能会变得相当大，具体取决于进行的链式调用的数量。
• 实际的 DOM 节点永远不会真正“按值”返回。
• 参考文献本身的大小很小。通常是指针的大小。

JavaScript：

• getElementById和querySelector (?) 返回对 DOM 节点的引用。
• getElementsByClassName和getElementsByTagName返回实时 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); // let's assume "2"
 parent.appendChild(document.createElement('div'));
 console.log(child_nodes.length); // should output "3"

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

jQuery

来自learn.jquery.com

jQuery 对象是一个围绕一个或多个 DOM 元素的类似数组的包装器。要获取对实际 DOM 元素（而不是 jQuery 对象）的引用，您有两种选择。第一种（也是最快的）方法是使用数组表示法：

$( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" )

第二种方法是使用 .get() 函数：

$( "#foo" ).get( 0 ); // Identical to above, only slower.

您还可以调用不带任何参数的 .get() 来检索真实的 DOM 元素数组。