TypeScript。 如何声明DOM集合？

Question

我努力了：

let $inputsCollection:HTMLCollection = document.body.querySelectorAll('input');

let $inputsCollection:HTMLCollection = document.body.querySelectorAll('input') as HTMLCollection;

let $inputsCollection = document.body.querySelectorAll('input') as HTMLCollection;

我尝试了几种方法，但没有任何效果。

Answer 1

querySelectorAll不返回HTMLCollection而是NodeList 。 试图将NodeList转换为HTMLCollection没有意义。 您可以这样做：

let $inputsCollection: NodeListOf<HTMLInputElement> = 
  document.body.querySelectorAll('input');

上面的案例使用HTMLInputElement因此列表中的所有元素都必须来自HTML中的input元素。 对于从查询中获取异构元素的情况，可以执行以下操作：

let $inputsCollection: NodeListOf<Element> = 
  document.body.querySelectorAll('*');

尽管querySelectorAll无法返回这样的节点，这甚至允许除Element对象之外的其他类型的节点：

let $inputsCollection2: NodeList = document.body.querySelectorAll('*');

仅供参考，返回HTMLCollection对象的方法是.getElementsBy...方法族（ .getElementsByClassName ， .getElementsByTagName等）。