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

wbgh16ku  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(104)

有没有办法让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标签
iibxawm4

iibxawm41#

没有“所有可能的”HTML标签列表,因为有无限多的HTML标签是“可能的”。有一个规范,列出了所有当前标准的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个标签)。
  • 这不是一个一对一的列表。例如,tbodytfootthead都使用HTMLTableSectionElement,这意味着
  • 上面列出了tablesection,但这不是一个标记,
  • 上面没有列出tbodytfootthead
  • 并不是所有的元素都有自己的构造函数,它们中的许多只是HTMLElement示例(codecitebaside,...)

所以,是的,代码方法行不通。你得从说明书上找到名单。

ahy6op9u

ahy6op9u2#

你可以从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] -->").

相关问题