使用 .getElementsByClassName() 的打字稿 return 类型

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 但当我在文档上调用它时，我得到一个 HTMLCollection？

基于 MDN Documentation，他们不应该 return 和 HTMLCollection 吗？

Answer 1

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

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

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

使用 .getElementsByClassName() 的打字稿 return 类型

Typescript return types with .getElementsByClassName()

javascript

dom

selector

typescript