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

时间:2015-07-20 14:23:05

标签: javascript jquery dom

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

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

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

思想?

6 个答案:

答案 0 :(得分:0)

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

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

这一切都来自the DOM4 spec,其中指出(强调我的):

  

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

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

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

  

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

这意味着as MDN puts itstatic

  

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

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

答案 1 :(得分:0)

来自jQuery网站:

  

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

jQuery Documentation

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

在这个例子中,我将展示如何将现有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这样的框架来节省你的时间

答案 4 :(得分:0)

答案 5 :(得分:0)

简而言之:

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

JavaScript的:

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

enter image description here 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元素数组。