javascript - 检查元素是内置元素还是自定义元素

我想知道是否有一种方法可以检查元素是内置元素还是自定义元素。

我知道一个使用element.constructor.name的选项，以检查它是否不是HTMLUnknownElement。但是问题是，引擎如何确定元素是未知元素还是已知元素。

以下是一个示例：

var elements = document.querySelectorAll('.content > *');
Array.from(elements).forEach(el => {
  console.log(el.constructor.name)
})

<div class='content'>
  <test-element>Test Element</test-element>
  <testElement>Dummy</testElement>
</div>

如果您注意到，添加连字符（-）使引擎将其作为已知元素进行处理。

那么，有没有确定该元素是否为未知元素的具体方法？

最佳答案

不确定是否采用万无一失的方法（也许调用DOM分析器？），但是如果您可以确定导致获取准确结果的问题的命名约定，则可以使用正则表达式来过滤导致问题的字符，然后创建“校正后的nodeName中的“虚拟”元素，然后测试虚拟：

var elements = document.querySelectorAll('.content > *');
Array.from(elements).forEach(el => {
  var dummy = document.createElement(el.nodeName.replace(/-+/, ""));
  console.log(dummy.constructor.name)
})

<div class='content'>
  <test-element>Test Element</test-element>
  <testElement>Dummy</testElement>
</div>

您也可以将其作为XHTML虚拟文档的一部分，然后使用XML解析器针对XHTML模式/ DTD验证该文档，但我认为XHTML5没有标准的文档。无论如何，这里有一些代码至少会将您的测试HTML字符串转换为XHTML语法。下一步将以编程方式对其进行验证。

const parser = new DOMParser();


var elements = document.querySelectorAll('.content > *');

Array.from(elements).forEach(el => {

  var doc = parser.parseFromString(el.outerHTML, "text/html");
  var result = new XMLSerializer().serializeToString(doc);

  console.log(result);
})

<div class='content'>
  <test-element>Test Element</test-element>
  <testElement>Dummy</testElement>
</div>

我还发现此HTML标记验证器为Node Package