gpt4 book ai didi

javascript - 如果我不需要结果列表中 CSS 选择器的粒度,我为什么要在 "live"NodeList 上使用静态 NodeList/HTMLCollection?

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:26:00 26 4
gpt4 key购买 nike

我通常听说是因为实时节点列表“不好”(see this Zakas article)并通知 querySelectorAll 返回静态 HTMLCollection 的决定。为什么人们认为实时 NodeLists 是一件坏事?代码示例可能会帮助我最好地理解这一点。

如果,每当我想使用缓存的节点集合的值进行任何计算时,该集合恰好不是陈旧的快照,我真的不能将其视为“坏”事情。

我完全理解使用 CSS 选择器字符串选择元素有多大用处,但是如果我只能在获取该集合后立即针对该集合可靠地运行代码,它似乎比实时 节点列表

最佳答案

实时节点列表还不错,但如果您不习惯,它们的行为可能会造成混淆。特别是如果您将它们视为数组(它们不是数组)

考虑一个将页面中的 div 数量加倍的经典示例。以下是这方面的三种尝试:

// Example 1 (doesn't work)
for(var i = 0; i < document.querySelectorAll("div").length ; i++){
document.body.appendChild(document.createElement("div"));
}

// Example 2 (works)
var divs = document.querySelectorAll("div");
for(var i = 0; i < divs.length ; i++){
document.body.appendChild(document.createElement("div"));
}

// Example 3 (doesn't work)
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
document.body.appendChild(document.createElement("div"));
}

示例 1 显然是一个无限循环。每次迭代,它都会重新检查页面中的 div 数量。

示例 2 按预期工作,因为节点列表已经缓存(当然,简单地缓存长度会更好)。

示例 3 看起来像示例 2。许多人希望它以相同的方式工作,因为节点列表被缓存了。但是由于节点列表是实时的,它实际上是另一个无限循环。这捕获了一些人。

此外,如果函数返回静态节点列表,您可以在每次需要时重新查询 DOM。这可以说比将实时列表转换为静态列表更简单。

关于javascript - 如果我不需要结果列表中 CSS 选择器的粒度,我为什么要在 "live"NodeList 上使用静态 NodeList/HTMLCollection?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15139432/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com