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,address,area,article,aside,audio,b,base,bdi,bdo,blockquote,body,br,button,canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,kbd,label,legend,li,link,main,map,mark,menu,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture,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，... ）

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

Answer 2

转到https://www.w3schools.com/tags/或https://techspirited.com/all-html-tags-list-of-all-html-tags。复制标签表的内容。粘贴到优秀。删除描述。另存为csv。

Answer 3

最后使用T.Js答案回答了！万一有人问

“ a，abbr，地址，区域，文章，放在一边，音频，b，基础，bdi，bdo，blockquote，正文，br，按钮，画布，标题，引用，代码，col，colgroup，数据，数据列表dd，del，详细信息，dfn，对话框，div，dl，dt，em，嵌入，字段集，figcaption，图，页脚，窗体，h1，h2，h3，h4，h5，h6，头，标头，hgroup，hr html，i，iframe，img，输入，在，kbd，标签，传奇，李，链接，主要，地图，马克，菜单，元，米，导航参数，图片，预，进度，q，rp，rt，红宝石，s，示例，脚本，部分，选择，插槽，小，源，跨度，强，样式模板，文本区域，脚，th，头部，时间，标题，tr，轨道，u，ul，var，视频，wbr“

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

3 个答案: