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标签是可能的 。 有说明 ，列出了所有当前的标准HTML标签，但是当然，您可以使用它们自己的标签创建自定义元素 。

出于好奇，我看了看如何从规范的网页上获取列表有多困难。 我想出了这个：

[...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

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

“一个，缩写，地址，区域，物品，一边，音频，B，碱，BDI，BDO，BLOCKQUOTE，身体，BR，按钮，帆布，字幕，引用代码，COL，COLGROUP，数据，数据列表，DD，德尔，细节，DFN，对话框，股利，DL，DT，EM，嵌入，字段集，figcaption，图中，页脚，形式，H1，H2，H3，H4，H5，H6，头，报头，hgroup，小时，HTML，我，iframe中，IMG，输入，插件，KBD，标签，图例，LI，链路，主，地图，标记，菜单，间位计，资产净值，无脚本，对象，醇，OPTGROUP，选项，输出，p，PARAM，图片，前期，进步，q，RP，RT，红宝石，S，桑普，脚本，区域中，选择，槽，小，来源，跨度大，强，风格，分，汇总，SUP，表，TBODY，TD，模板，文本区域，TFOOT，TH，THEAD，时间，标题，TR，跟踪，U，UL，VAR，视频，WBR”

Answer 3

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