JS 获取所有可用标准 HTML 标记的列表

Question

有没有办法让 JS 导出所有可能的标准 HTML 标签的列表？

例如，如果我们想获得所有可用的样式属性，我们可以

var d = document.createElement('div');
for(var property in d.style) console.log(property); // would print out all properties;

但我们想知道是否有办法获取所有可用的 HTML 标签。

如果这样的事情是不可能的，有人知道我们在哪里可以得到这样的清单吗？我们在逗号分隔 / json 中都找不到它...我们发现的只是带有引用等的网站...

• 注意 - 我们不是在谈论 document.querySelectorAll('*')，它会为我们提供 DOM 中的所有元素。我们正在寻找所有可能的标准 HTML 标记

Answer 1

没有“所有可能的”HTML 标签列表，因为可能有无数个 HTML 标签。 the specification 列出了所有当前的标准 HTML 标签，当然，您可以使用自己的标签创建 custom elements。

出于好奇，我查看了从规范网页获取列表的难度。我想出了这个：

[...document.querySelectorAll("th > code[id*='elements-3:'] > a")].map(a => a.textContent).join()

所以，不难。

如果您在从上面的链接打开规范时在控制台中运行它，截至 2018 年 10 月撰写本文时，它列出了 112 个元素：

a,abbr,地址,区域,文章,aside,audio,b,base,bdi,bdo,blockquote,body,br,button,canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,详细信息,dfn,对话框,div,dl,dt,em,embed,fieldset,figcaption,图,页脚,窗体,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i, iframe，img，输入，ins，kbd，标签，图例，li，链接，主要，地图，标记，菜单，元，仪表，导航，noscript，对象，ol，optgroup，选项，输出，p，参数，图片， pre,progress,q,rp,rt,ruby,s,samp,script,section,select,slot,small,source,span,strong,style,sub,summary,sup,table,tbody,td,template,textarea, tfoot,th,thead,time,title,tr,track,u,ul,var,video,wbr

---

使用基于代码的方法很诱人，通过检查 window 的属性来寻找 HTML 元素构造函数：

const show = msg => {
  const p = document.createElement('pre');
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
};
const tags = Object.getOwnPropertyNames(window)
  .map(key => {
    const match = /^HTML(.+)Element$/.exec(key);
    return match && match[1].toLowerCase();
  })
  .filter(tag => tag && tag !== "unknown");
show(`${tags.length} tags found:`);
tags.forEach(show);

.as-console-wrapper {
  max-height: 100% !important;
}

但是：

• 这只告诉您浏览器支持什么，可能不是定义的 HTML 的全部范围，并且会因供应商而异（对我来说，Chrome 列出了 71 个标签，而 Firefox 和 Edge 列出了 67 个）。
• 这不是一个一对一的列表。例如，tbody、tfoot 和 thead 都使用 HTMLTableSectionElement，这意味着
  • 上面列出了tablesection，但这不是标签，而且
  • 以上未列出tbody、tfoot或thead
• 并非所有元素都有自己的构造函数，其中许多只是HTMLElement 实例（code、cite、b、aside、...）

所以，是的，代码方法不起作用。您必须从规范中获取列表。