函数映射的JavaScript内建类的HTML标签

我需要的JavaScript内建类映射到相应的HTML标签的功能，例如：函数映射的JavaScript内建类的HTML标签

function classToTagName(clazz) { 
    // implementation 
} 

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

是否有可能实现它，而无需使用显式的映射或正则表达式？

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

来源

2016-08-21 Marina

你可以添加一个如何使用这个映射的例子吗？ – rdubya

我在问函数。我编辑的例子。 – Marina

我更想知道你是如何得到这个接口名称的。我不知道是否有办法使用一些其他数据来获取标签名称，或者是只提供接口类名称的东西？ – rdubya

有没有这样的映射，作为接口可以属于多个标签名。这里是一个（可能不完整）模糊接口列表（基于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

来源

2016-08-21 20:43:48

最好的例子表明没有意义实现这样的功能。谢谢。 – Marina

仅供参考，Chrome使用的列表是从元数据生成的，[HTMLNames.in]（https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/html/HTMLTagNames.in?q=HTMLTagNames.in&sq =包：铬＆升= 1）。如果条目没有interfaceName行，则接口名称是HTML（Thing）元素。如果你在Chromium树上漫游，你会看到处理这个文件的Python脚本。 WebKit（Safari）有类似的东西。 –

我知道这不完全是你问的映射，但希望它帮助。

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

您可以通过在构造函数的名字查找元素的原型链获取接口的名称。

来源

2016-08-21 20:05:53

@Oriol否，本地名称返回'输入'，这是我们开始的。 –

@Oriol也改变__proto__到Object.getPrototypeOf，谢谢你的提示。 –

好的，我对这个问题提出的问题和你回答的问题感到困惑，这些问题是相反的。 – Oriol

据Custom Elements，

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

该规范的编辑已经知道，看起来是多余的信息，但他们解释：

在一般情况下，元素的名称被扩展的不能是简单地通过查看其延伸的元素接口来确定，因为许多元素共享相同的接口（诸如q和都共享HTMLQuoteElement）。

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

来源

2016-08-21 20:23:24 Oriol

好找。谢谢。 – Marina

函数映射的JavaScript内建类的HTML标签

回答

相关问题