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，缩写，地址，区域，文章，旁白，音频，b，基地，BDI，BDO，块引用，正文，br，按钮，画布，标题，引用，代码，col，colgroup，数据，数据列表，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，图例，李，链接，主，地图，标记，菜单，元，米，导航，无脚本，对象，OL，optgroup，选项，输出，p，参数，图片，前，进度，q，rp，rt，ruby，s，samp，脚本，部分，选择，插槽，小，源，跨度，强，样式，子，摘要，sup，表，tbody，td，模板，文本区，tfoot，th，thead，时间，标题，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

你可以从像w3scools这样的网站上获取一个列表，所以，我做到了。无论如何，我都需要这个，并把它放在一个项目中。它是截至今天(2023 年 2 月 8 日(所有 HTML 元素的数组。

const HTMLElements = [
"!DOCTYPE",
"a",
"abbr",
"abbr",
"acronym", // NOT HTML5
"address",
//"applet", // NOT HTML5 (NOT MAJORLY SUPPORTED)
"area",
"article",
"aside",
"audio",
"b",
"base",
"basefont", // NOT HTML5
"bdi",
"bdo",
"big", // NOT HTML5
"blockquote",
"body",
"br",
"button",
"canvas",
"caption",
"center", // NOT HTML5
"cite",
"code",
"col",
"colgroup",
"data",
"datalist",
"dd",
"del",
"details",
"dfn",
"dialog",
//"dir", NOT HTML5 (use "ul" instead)
"div",
"dl",
"dt",
"em",
"embed",
"fieldset",
"figcaption",
"figure",
//"font", // NOT HTML5 (use CSS)
"footer",
"form",
//"frame", // NOT HTML5
//"frameset", // NOT HTML5
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"head",
"header",
"hr",
"html",
"i",
"iframe",
"img",
"input",
"ins",
"kbd",
"label",
"legend",
"li",
"link",
"main",
"map",
"mark",
"meta",
"meter",
"nav",
//"noframes", // NOT HTML5
"noscript",
"object",
"ol",
"optgroup",
"option",
"output",
"p",
"param",
"picture",
"pre",
"progress",
"q",
"rp",
"rt",
"ruby",
"s",
"samp",
"script",
"section",
"select",
"small",
"source",
"span",
//"strike", NOT HTML5 (Use <del> or <s> instead)
"strong",
"style",
"sub",
"summary",
"sup",
"svg",
"table",
"tbody",
"td",
"template",
"textarea",
"tfoot",
"th",
"thead",
"time",
"title",
"tr",
"track",
//"tt", // NOT HTML5 (Use CSS)
"u",
"ul",
"var",
"video",
"wbr"
] // Total of 116 (excluding non-html5 and also comments, which are "<!-- [comment] -->").