Question

我想知道是否有办法检查元素是内置元素还是自定义元素。

我知道使用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>

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

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

Answer 1

不确定是否采用傻瓜式方法（可能会调用DOM Parser？），但是如果您可以确定导致问题获得准确结果的命名约定，则可以使用正则表达式来过滤导致问题的字符，从更正的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 Parser针对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

检查元素是构建内元素还是自定义元素

1 个答案: