Имя тега HTML-элемента из конструктора

Question

Рассмотрим функцию:

tagName => document.createElement(tagName).constructor

, которая возвращает функцию конструктора HTML-элементов с определенным именем тега.

Я хотел бы обратить этот процесс вспять и получить имя тега (или имена?) HTML-элемента при условии его конструктора. Я хотел бы сделать это для некоторых модульных тестов, которые я пишу, но, возможно, есть и другие варианты использования.

Несколько примеров:

tagNameOf(HTMLDivElement)       // should be "div"
tagNameOf(HTMLIFrameElement)    // should be "iframe"
tagNameOf(HTMLHtmlElement)      // should be "html"
tagNameOf(HTMLTableRowElement)  // should be "tr"

К сожалению, я понятия не имею, с чего начать, за исключением, может быть, использования статического отображения.

Есть ли простой способ добиться этого?

Answer 1

Я извлек это решение одного из моих проектов:

const tagNameOf = (function () {
  // This lookuptable is key to the solution, it must somehow be kept up to date
  const elementNameLookupTable = {
    'UList': ['ul'],
    'TableCaption': ['caption'],
    'TableCell': ['th', 'td'],
    'TableCol': ['col', 'colgroup'],
    'TableRow': ['tr'],
    'TableSection': ['thead', 'tbody', 'tfoot'],
    'Quote': ['q'],
    'Paragraph': ['p'],
    'OList': ['ol'],
    'Mod': ['ins', 'del'],
    'Media': ['video', 'audio'],
    'Image': ['img'],
    'Heading': ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
    'Directory': ['dir'],
    'DList': ['dl'],
    'Anchor': ['a']
  };
  return function (HTMLElementConstructor) {
    let match; let tagName = [];
    if (typeof HTMLElementConstructor === 'function') {
      match = /HTML(\w+)Element/.exec(HTMLElementConstructor.name);
      if (match) {
        tagName = elementNameLookupTable[match[1]] || [match[1].toLowerCase()];
      }
    }
    return tagName;
  };
}());

// Test:
console.log(tagNameOf(HTMLAnchorElement));
console.log(tagNameOf(HTMLMediaElement));
console.log(tagNameOf(HTMLHeadingElement));

Следует отметить, что функция возвращает массив, поскольку существует более одного возможного соответствующего имени тега.

Answer 2

Полагаю, грязно выглядящее решение - проверить конструктор toString():

const makeConstructor = tagName => document.createElement(tagName).constructor;
const constructorToTagName = constr => constr.toString().match(/HTML(\w+)Element/)[1].toLowerCase();
console.log(constructorToTagName(makeConstructor('div')));
console.log(constructorToTagName(makeConstructor('span')));