个人中心
文章发布
退出
作者热门文章
- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
30
4
来自 MDN NodeList :
In some cases, the NodeList is a live collection, which means that changes in the DOM are reflected in the collection. For example, Node.childNodes is live:
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"In other cases, the NodeList is a static collection, meaning any subsequent change in the DOM does not affect the content of the collection. document.querySelectorAll returns a static NodeList.
所以……有点烦人!是否有关于哪些方法返回实时列表以及哪些方法返回静态列表的中心引用，而无需单独检查 DOM API 的所有不同部分？这里有什么规则在起作用吗？
最佳答案
有关每个方法的详细信息，如果它是实时的，但似乎没有确定它的标准约定。
document.getElementsByClassName() 是一个 HTMLCollection，并且是实时的。
document.getElementsByTagName() 是一个 HTMLCollection，并且是实时的。
document.getElementsByName() 是一个 NodeList 并且是实时的。
document.querySelectorAll() 是一个 NodeList 并且不有效。
HTMLCollection 似乎始终处于事件状态
An HTMLCollection is a list of nodes. An individual node may beaccessed by either ordinal index or the node's name or id attributes.
Note: Collections in the HTML DOM are assumed to be live meaning thatthey are automatically updated when the underlying document ischanged.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506
因此，HTML 集合总是“在 dom 中”，而 nodeList 是一个更通用的结构，可能在也可能不在 DOM 中。
A NodeList object is a collection of nodes...The NodeList interface provides the abstraction of an orderedcollection of nodes, without defining or constraining how thiscollection is implemented. NodeList objects in the DOM are live.
http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live
听起来不错，对吧？
A collection is an object that represents a lists of DOM nodes. Acollection can be either live or static. Unless otherwise stated, acollection must be live.
http://www.w3.org/TR/2012/WD-dom-20120405/#collections
因此静态集合将在规范中如此指明。因此，按照这个逻辑，document.querySelectorAll() 是一个集合，但它在 DOM 中不。因为虽然集合可能是实时的也可能不是实时的，但 DOM 中的集合 必须是实时的...这种区别不是很有帮助。
好吧，这是确定集合是否存在的快速方法；它将集合成员的克隆附加到 DOM(因此它将匹配选择器)，并检查长度是否改变，然后将其删除(因此页面不受影响)
演示
function isLive(collection) {
if (HTMLCollection.prototype.isPrototypeOf(collection)) return true // HTMLCollections are always live
const length = collection.length;
if (!length) return undefined; // Inconclusive
const el = collection.item(0);
const parent = el.parentNode;
const clone = el.cloneNode();
clone.style.setProperty('display', 'none', 'important');
parent.appendChild(clone);
const live = collection.length !== length;
parent.removeChild(clone);
return live;
}
const divs1 = document.getElementsByClassName('c');
const divs2 = document.getElementsByTagName('span');
const divs3 = document.getElementsByName('notFound');
const divs4 = document.querySelectorAll('.c');
console.log("document.getElementsByClassName('c'):", divs1.toString()); // [object HTMLCollection]
console.log("document.getElementsByTagName('notFound'):", divs2.toString()); // [object HTMLCollection]
console.log("document.getElementsByName('notFound'):", divs3.toString()); // [object NodeList]
console.log("document.querySelectorAll('.c'):", divs4.toString()); // [object NodeList]
console.log('isLive(divs1)', isLive(divs1)); // true
console.log('isLive(divs2)', isLive(divs2)); // true
console.log('isLive(divs3)', isLive(divs3)); // undefined
console.log('isLive(divs4)', isLive(divs4)); // false<html>
<body>
<div>
<div class="c">C1</div>
<div class="c">C2</div>
</div>
<div>
<div class="c">C3</div>
<div class="c">C4</div>
</div>
</body>
</html>关于javascript - NodeList 什么时候上线，什么时候是静态的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28163033/
30
4
0
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
在 C# 静态方法中是否有一种方法可以引用定义该方法的类型？ 在实例方法中，您可以通过以下方式确定类型: public void Foo() { Type type = this.GetTyp
WPF:静态、动态资源以及资源词典 静态资源与动态资源 我们常常会使用样式或者控件模板放在Window.Resources中，比如这样： 静态资源与动态资源使用如下： <Window
任何人都知道如何在共享/静态函数中动态加载控件？该函数本身位于 mustinherit/abstract 类中。 (这是 VB 中的 ASP.NET 项目)我想做这样的事情: VB: Publ
在我看来，静态/强类型编程语言最宝贵的一点是它有助于重构:如果/当您更改任何 API，那么编译器会告诉您该更改破坏了什么。 我可以想象用运行时/弱类型语言编写代码......但我无法想象没有编译器的帮
正如我的名字所暗示的，我是一名 .NET 开发人员，但我对 Java 的兴趣越来越大，并且我有兴趣学习更多其他语言，因为这有助于我学习更多关于编程的知识。 无论如何，我的问题是:不带参数/不使用状态的
我在java中使用WireMock来 stub POST请求。该请求返回一个存储在我本地的 json 正文文件。 stub 看起来像这样: wireMockServer.stubFor(get(url
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。 基本上，我想初始化该函数中的
Python 是否有类构造函数的机制，即每当首次引用类时(而不是创建该对象的实例时)调用的函数？我知道其他一些语言中也存在这种情况，但我还没有在 Python 中遇到过。 基本上，我想初始化该函数中的
这个问题已经有答案了: What is the difference between dynamic and static polymorphism in Java? (14 个回答) 已关闭 4 年
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Static initializer in Java 我想知道这个静态的东西(抱歉，这是我第一次遇到这个)对一个类有
如果c++应用程序是按以下方式组织的 //file1.cpp static Y sgObj = X::getInitObject(0); //declared in file scope //fil
我有一个抽象类(AvergedDataRecord)，我需要进一步抽象(DataRecord)，这样我就可以将它扩展到原始类和一个新的具体类(SummedDataRecord)，并且我在获取某些方法时
我正在尝试制作一个字符串枚举。这是我到目前为止所得到的， private class TypedEnum : IEnumerable { public IEnumerator GetEnume
我选修了一门名为“安全代码”的类(class)，在下一个作业中，我们应该对一些 C 文件和 JavaEE Web 项目进行静态/动态分析。 我检查了“源监视器”并在 C 文件上运行它，但是(除非我不知
我有两个类，一个是登录类，一个是用户类。在 loggedIn 类中，我想显示我在用户登录时所做的共享首选项。 loginPrefs = getSharedPreferences("loginprefe
我在同一个 Activity 中有两个静态 fragment ，在“fragmentA”中我有一个自定义列表，当一个项目被点击时必须在“fragmentB”中出现一个细节，细节只在我改变屏幕方向时出现
在 Java 中是未修改方法变量，缺少final，每次都重新初始化限定符 静态方法 实例方法 如果 1. 或 2.(或两者)的答案是 final 限定符允许 Java 执行优化并存储方法变量只有一次？
我有两个类相互交互。第一个是中心的，如下: public class Datenbank { double winkelPanel = 0; double groessePanel = 0; doub
我有一个 mysql 数据库，它连接基于 Web 的 php 应用程序和 FoxPro 应用程序(是的，foxpro)。在之前的“开发人员”被解雇后开始处理这个问题。 无论如何，我熟悉 AES_Enc
我是一名优秀的程序员,十分优秀！