我问的原因是因为我想在这个巨大的多维数组中存储一堆DOM节点。
成本:占用内存空间。问题是空间有多大,这取决于我是否获得引用或实际的DOM节点。
好处:1)它使我的代码更简单。 2)我可以避免遍历,而只是引用我的数组中的DOM节点。
思想?
答案 0 :(得分:0)
这个答案有误,请参阅下面的评论。
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()
。
这意味着返回的集合不是对原始节点的一组引用,而是一组表示执行查询时节点的节点。这意味着必须创建所有匹配节点的副本,并且您不再使用对活动节点的引用。
答案 1 :(得分:0)
来自jQuery网站:
... jQuery() - 也可以写成$() - 搜索 任何与提供的选择器匹配的元素的DOM并创建一个 引用这些元素的新jQuery对象
答案 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的:
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
jQuery对象是围绕一个或多个DOM元素的类似数组的包装器。要获得对实际DOM元素(而不是jQuery对象)的引用,您有两个选项。第一个(也是最快的)方法是使用数组表示法:
$( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" )
第二种方法是使用.get()函数:
$( "#foo" ).get( 0 ); // Identical to above, only slower.
您也可以调用不带任何参数的.get()来检索真正的DOM元素数组。