Question

我需要一个将JavaScript内置类映射到相应的html标记名称的函数，例如：

function classToTagName(clazz) {
  // implementation
}

classToTagName(HTMLInputElement) // ->
"input" 
classToTagName(HTMLAnchorElement) // ->
"a"

是否可以在不使用显式映射或正则表达式的情况下实现它？

如果我有对象实例，我可以使用DOM tagName属性，但浏览器似乎禁止使用TypeError: Illegal constructor调用内置标记类的构造函数。

Answer 1

根据Custom Elements，

定义我们的自定义元素时，我们还必须指定extends选项：
customElements.define("plastic-button", PlasticButton, { extends: "button" });

规范编辑已经知道这似乎是多余的信息，但他们解释说：

通常，要扩展的元素的名称不能简单地通过查看它扩展的元素接口来确定，如许多元素共享相同的界面（例如q和blockquote 共享HTMLQuoteElement）。

所以这是不可能的。您的映射没有明确定义。

Answer 2

没有这样的映射，因为接口可以属于多个标记名称。这是一个（可能不完整）模糊接口列表（基于element list on mdn）：

HTMLElement: address,article,aside,footer,header,hgroup,nav,section,dd,dt,figcaption,figure,main,abbr,b,bdi,bdo,cite,code,dfn,em,i,kbd,mark,rp,ruby,rt,rtc,rb,s,samp,small,strong,sub,sup,u,var,wbr,noscript,summary,acronym,basefont,big,center,command,noembed,plaintext,strike,tt
HTMLHeadingElement: h1,h6,h2,h3,h4,h5
HTMLPreElement: pre,listing,xmp
HTMLUnknownElement: data,time,menuitem,element,applet,blink,isindex,multicol,nextid,spacer
HTMLQuoteElement: q,blockquote
HTMLModElement: del,ins
HTMLTableColElement: col,colgroup
HTMLTableSectionElement: tbody,thead,tfoot
HTMLTableCellElement: td,th

Answer 3

我意识到这并不是你所询问的映射，但希望它有所帮助。

＆＃13;

const getInterfaceName = e => Object.getPrototypeOf(e).constructor.name;
const createElement = tag => document.createElement(tag);
const getTagInterface = tag => getInterfaceName(createElement(tag));

console.log(getTagInterface('a'));  // HTMLAnchorElement 
console.log(getTagInterface('input'));  // HTMLInputElement

＆＃13;

您可以通过在构造函数的名称中查找元素的原型链来获取界面的名称。

函数将JavaScript内置类映射到html标记名

3 个答案: