Question

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

成本：占用内存空间。问题是空间有多大，这取决于我是否获得引用或实际的DOM节点。

好处：1）它使我的代码更简单。 2）我可以避免遍历，而只是引用我的数组中的DOM节点。

思想？

Answer 1

这个答案有误，请参阅下面的评论。

Document.getElementById()以及依赖它的方法或包装器返回引用同样适用于Document.querySelector()。

这一切都来自the DOM4 spec，其中指出（强调我的）：

if是表示DOM节点列表的对象。 collection可以是collection或live。 除非另有说明，否则收藏集必须为static。

从编程的角度来看，这个概念很容易理解，你浪费的内存更少，没有时间花在复制周围，导致更快的执行。

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

live方法返回的NodeList对象必须为querySelectorAll()。

这意味着as MDN puts it，static

返回所有匹配元素节点的非实时Document.querySelectorAll()。

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

Answer 2

来自jQuery网站：

... jQuery（） - 也可以写成$（） - 搜索任何与提供的选择器匹配的元素的DOM并创建一个引用这些元素的新jQuery对象

jQuery Documentation

Answer 3

jQuery返回实际的DOM节点。这就是为什么你会发现自己大部分时间都在写$(this)。这是因为你想在jQuery中包装你的节点以便能够使用一些jQuery方法。但是，建议（几乎在指南中）通过引用缓存DOM节点。例如，

var div = $('div');
div.dosomeMethod();
div.append();

这可确保您在尝试访问某个元素时不会遍历整个DOM树（昂贵的DOM部分）。每当您进行更新时，请确保您是批量更新。

Answer 4

在这个例子中，我将展示如何将现有DOM元素克隆到内存中的对象，还可以在内存中创建对象而不将其推送到正文，创建集合对象，从集合到主体的附加元素以及保留引用的对象，从正文中删除。这么多的行动......

<nav class="navbar navbar-default">
<div class="container-fluid">
      <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search"></input>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
    </div>
</nav>

**但我建议你使用像angularjs，reactjs，emberjs这样的框架来节省你的时间

Answer 5

返回对象的引用。见这里：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer 6

简而言之：

有些JavaScript方法会将引用返回给DOM节点。
某些JavaScript方法返回类似于数组的对象，包含对DOM节点的引用。这些物品不是很大（？）。
jQuery返回一个jQuery对象，包含对DOM节点的引用。这些jQuery对象可能会变得非常大，depending on会进行多少次链式调用。
实际的DOM节点never实际返回＆＃34;按值＆＃34;。
引用本身are的大小很小。通常是指针的大小。

JavaScript的：

getElementById和querySelector（？）返回对DOM节点的引用。
getElementsByClassName和getElementsByTagName返回实时HTMLCollections。
getElementsByName返回实时NodeList。
getElementsByNameNS会返回实时NodeList或实时HTMLCollection，具体取决于浏览器。
querySelectorAll会返回非实时 NodeList。

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

enter image description here

直播与非直播

来自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。

enter image description here

的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元素数组。

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

6 个答案: