javascript - 有没有办法获得所有可用的元素？

Question

我想为我正在构建的 Web 应用程序获取浏览器支持的所有 html 标记名称。我的意思是这样的：

console.log(getAllElements())
//[a, abbr, acronym, address, applet, area, base, ...]

标签： javascripthtmldom

Answer 1

恐怕这真的不可能。让我来告诉你为什么：

首先，我希望所有可能的元素都将由window对象上的接口表示，例如window.HTMLDivElement. 这对许多人来说都是正确的，您可以通过执行它来查看结果（为了论证而将 svg 放在一边）：

Object.getOwnPropertyNames(window).filter(name => /HTML.*Element/.test(name))

结果数组有两个问题。首先，名称，即使您提取名称并省略HTML和Element部分，也与标签名称不同。示例：HTMLDListElement与<datalist>. 因此很自然地，人们会尝试实例化该元素以查看它在标记中的表示方式，例如new HTMLDivElement()，但这是一种禁止的操作！

第二个问题是，并非所有元素都由它们自己的界面表示。有些足够通用，例如<section>，它们由 generic 表示HTMLElement，这不会为您提供任何对您的案例有用的信息。

另一种方法是document.createElement根据其属性来检查任意元素是否真的是原生的。现在这适用于<video>具有特殊属性的元素，使它们与自定义元素区分开来，但同样，并非每个元素都是这样，<section>再次以属性为例，它与创建自定义元素几乎没有区别<sssection>.

所以不，除了检查浏览器对规范的遵守情况并手动列出元素之外，没有其他方法可以真正找到答案。