getElementsByClassName 在 Chrome 中到底是如何工作的？，特别是 w.r.t.节点列表和 DOM

以下所有结果都是使用 Google Chrome v36 及其控制台获得的。

在调试 WordPress 插件时，我发现运行这个小 Javascript 片段

console.log(document.getElementsByClassName("switch-tmce"))
console.log(document.getElementsByClassName("switch-tmce").length)

将记录以下内容（页面加载完成后展开）：

[item: function, namedItem: function]
    0: a#ninja_forms_field_10-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    1: a#ninja_forms_field_15-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    length: 2
    ninja_forms_field_10-tmce: a#ninja_forms_field_10-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    ninja_forms_field_15-tmce: a#ninja_forms_field_15-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    __proto__: HTMLCollection
0

如果我调整代码片段以等待 DOM 完成加载，如下所示：

window.addEventListener("DOMContentLoaded", function() {
    console.log(document.getElementsByClassName("switch-tmce"))
    console.log(document.getElementsByClassName("switch-tmce").length)
}, false);

然后它会记录以下内容（页面加载完成后展开）：

[a#ninja_forms_field_10-tmce.hide-if-no-js.wp-switch-editor.switch-tmce, a#ninja_forms_field_15-tmce.hide-if-no-js.wp-switch-editor.switch-tmce, ninja_forms_field_10-tmce: a#ninja_forms_field_10-tmce.hide-if-no-js.wp-switch-editor.switch-tmce, ninja_forms_field_15-tmce: a#ninja_forms_field_15-tmce.hide-if-no-js.wp-switch-editor.switch-tmce, item: function, namedItem: function]
    0: a#ninja_forms_field_10-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    1: a#ninja_forms_field_15-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    length: 2
    ninja_forms_field_10-tmce: a#ninja_forms_field_10-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    ninja_forms_field_15-tmce: a#ninja_forms_field_15-tmce.hide-if-no-js.wp-switch-editor.switch-tmce
    __proto__: HTMLCollection
2

我无法理解的是这里到底发生了什么 - 特别是为什么length属性只能“正确”返回，可以这么说，afterDOM 加载。我发现了这个解释 https://stackoverflow.com/questions/5844732/getelementsbytagname-length-returns-zero:

调用 getElementsByTagName 时，可能不存在输入元素，但由于 NodeList 是动态的，因此当文档加载时，元素将包含所有 28 个输入。

但我读到的意思是 getElementsByTagName 解析 NodeList 直到它可以解析 DOM，并且只能返回length解析 DOM 时的属性，这对我来说似乎不正确，因为它仍然具有有限的可数元素。

此外，还有一个问题[item:function, namedItem:function]改变为[a.someClass.someOtherClass, a.someclass.someOtherClass]，上面没有解释。

因此我的问题是：幕后到底发生了什么getElementsByClassName认为length尽管原型保持不变，但直到 DOM 加载后才设置属性（不存在？）？这与输出有何关系/为什么输出会发生变化[item:function, namedItem:function] to [a.someClass.someOtherClass, a.someclass.someOtherClass]?

如你看到的，getElementsByClassName返回一个HTMLCollection- 这是一个live供您查询参考。

发生的事情是你正在扩大liveDOM 准备好后在控制台中引用，但记录它beforeDOM 已准备就绪。因为它是一个live引用，通过在 DOM 准备好时扩展，当HTMLCollection引用内存中的对象，它会看到 DOM 已准备好并从完成的 DOM 中提取。

但是，如果您在暂停 Javascript 执行的同时扩展了引用（这可以通过类似的方法来完成）debugger），这就是你会得到的：

[item: function, namedItem: function]
    length: 0
    __proto__: HTMLCollection
0

因为那时 DOM 还没有准备好。

这就是为什么第一个记录的引用显示为[item: function, namedItem: function]，因为当你记录它时，DOM 还没有准备好。一旦 DOM 准备好，它就会被记录为[a.someClass.someOtherClass, a.someClass.someOtherClass].

不过，长度输出只是一个数字，而不是对象引用，并按原样记录，这就是为什么它在 DOM 准备好之前打印 0 并在 DOM 准备好之后打印 2 - 因为那是exactly发生了什么，因为在 DOM 准备好之前没有 DOM 元素。