javascript - 使用 .getElementsByClassName() 的 Typescript 返回类型

Question

当我对两个不同的元素调用 getElementsByClassName 时，我很难理解结果的差异:

考虑以下代码:

let section:HTMLElement = document.getElementById("mainSection");

// This returns NodeListOf<Element>
let blah1 = section.getElementsByClassName("blah");

// This returns HTMLCollectionOf<Element>
let blah2 = document.getElementsByClassName("blah");

为什么当我在 section 上调用该方法时，我得到一个 NodeList 但当我在 document 上调用它时，我得到一个 HTMLCollection?

基于MDN Documentation , 他们不应该都返回一个 HTMLCollection 吗？

Answer 1

javascript document 对象只包含有效的 HTML 元素，这是标准的保证。

但是，HTML 元素(您的 selection 是)可以包含其他 HTML 元素或无效 html 的节点(想想纯文本，这是一个节点，但不能(合法)存在单独在 Javascript 文档中)。

NodeList 和 HTMLCollection 几乎相同，但是使用传统的面向对象语言，HTMLCollection 扩展了 NodeList，即它可以做 NodeList 可以做的一切，而且它还有 namedItem 方法。