TypeScript中如何正确获取HTMLElement[]类型的DOM元素列表？

问题根源 #

document.body.children返回的是HTMLCollection<Element>，TypeScript中Element是HTMLElement的父类，直接将其元素存入HTMLElement[]数组会触发类型不匹配错误——因为Element理论上可能包含非HTML元素（比如SVG元素，不过实际页面中body的直接子元素几乎都是HTMLElement）。

可行解决方案 #

1. 数组转换+类型断言（简洁高效）

将类数组的HTMLCollection转换为数组后，直接断言为HTMLElement[]，适合确定body子元素都是HTMLElement的场景：

// 方式1：直接转换并断言整个数组
const topLevelElements = Array.from(document.body.children) as HTMLElement[];

// 方式2：转换时逐个断言（效果一致）
const topLevelElements = Array.from(document.body.children, el => el as HTMLElement);

如果用querySelectorAll('body > *')，同样需要先转数组再断言：

const topLevelElements = Array.from(document.querySelectorAll('body > *')) as HTMLElement[];

2. 类型守卫+过滤（严格类型安全）

如果需要确保类型绝对安全，可自定义类型守卫函数过滤元素：

// 定义类型守卫，判断元素是否为HTMLElement
function isHTMLElement(el: Element): el is HTMLElement {
  return 'style' in el; // 用HTMLElement特有的属性做判断
}

// 过滤后得到严格的HTMLElement[]类型
const topLevelElements = Array.from(document.body.children).filter(isHTMLElement);

关于你之前的尝试 #

• querySelectorAll('body')得到的是body元素本身，不是它的子元素，自然不符合需求；
• 直接断言querySelectorAll('body > *')为HTMLElement[]报错，是因为querySelectorAll返回的是NodeListOf<Element>（类数组对象），不能直接断言为数组，必须先通过Array.from转换为数组；
• push时用c as HTMLElement是可行的，但不如一次性转换数组高效简洁。

内容的提问来源于stack exchange，提问作者xkeshav