<strong>、<cite>、<article>等元素对应的HTMLElement类型查询

你提到的<strong>、<cite>、<article>这类元素，在TypeScript的官方DOM类型定义中没有单独的专属派生接口，直接使用HTMLElement作为类型即可，这是符合标准设计的。

类型设计规则 #

TypeScript的DOM类型定义完全遵循W3C标准制定，仅会为带有特殊专属属性、方法的元素单独定义派生接口：

• 比如<img>有src、naturalWidth等专属属性，对应HTMLImageElement
• 比如<input>有value、checkValidity()等专属属性和方法，对应HTMLInputElement
• 比如<table>有createTHead()、rows等专属方法和属性，对应HTMLTableElement

而<strong>、<cite>、<article>这类仅承担语义标记作用、没有额外专属DOM属性/方法的元素，W3C标准本身就没有为它们定义单独的HTMLElement子接口，所以TypeScript里自然也没有对应的专属类型，直接使用HTMLElement就是最精准的声明。

实际使用示例 #

// 获取元素时直接指定HTMLElement类型即可
const article = document.querySelector('article') as HTMLElement
const strongText = document.querySelector('strong') as HTMLElement
const citeReference = document.querySelector('cite') as HTMLElement

如果有特殊场景需要做更细的类型区分，你也可以手动扩展全局的HTMLElement类型映射，但绝大多数业务开发场景下不需要额外处理。

内容的提问来源于stack exchange，提问作者t-mart