<strong>、<cite>、<article> 等的 HTMLElement 类型答案

【问题标题】：HTMLElement type for <strong>, <cite>, <article>, and others<strong>、<cite>、<article> 等的 HTMLElement 类型
【发布时间】：2021-09-20 18:19:44
【问题描述】：

HTMLElement 等元素的类型是什么

<strong>
<cite>
<article>
还有许多其他

根据 MDN 的HTML elements reference，HTMLElement 下的元素比类型多得多（参见this list）。

我正在使用 TypeScript 对元素进行一些处理，并希望以最具体的类型存储对它们的引用。虽然许多其他元素都有明确命名的类型（例如HTMLDivElement、HTMLImageElement 和HTMLTableElement），但我上面列出的元素似乎没有任何对应的类型。

【问题讨论】：

MDN 将<strong> 和<article> 的“DOM 接口”列为“HTMLElement”。但是，<cite> 说“HTMLElement 直到 Gecko 1.9.2 (Firefox 4) 包括在内，Firefox 为这个元素实现了 HTMLSpanElement 接口。”

标签： javascript html typescript dom webapi

【解决方案1】：

它可能只是 HTMLElement

console.log(document.getElementById('div').constructor);
console.log(document.getElementById('table').constructor);
console.log(document.getElementById('img').constructor);
console.log(document.getElementById('strong').constructor);
console.log(document.getElementById('cite').constructor);
console.log(document.getElementById('article').constructor);

<strong id="strong">strong</strong>
<div id="div">div</div>
<cite id="cite">cite</cite>
<article id="article">article</article>
<table id="table"><tr><td><img id="img" src="https://www.gravatar.com/avatar/460d2e9d0a84c78e6a5c141a51eb3ab9?s=128&d=identicon&r=PG"></td</tr></table>

【讨论】：

这不仅回答了这个问题，而且提供了一种确定任意元素类型的方法。