单元测试中伪造HTMLElement的最佳方案解析：为何DOMParser/Document.parseHTMLUnsafe仅返回HTMLDocument及替代方法

首先得明确问题根源：Document.parseHTMLUnsafe和DOMParser.parseFromString返回的是完整的HTML文档对象（HTMLDocument），而非你预期的单个HTMLElement实例。HTMLDocument属于Document节点类型，和HTMLElement是DOM树中不同分支的节点，所以直接用instanceof HTMLElement校验自然不通过。

getElementById确实能解决问题，但它依赖元素必须有ID，不够通用（比如解析无ID的元素时就失效），也不是最简便的方式。下面是几种更优的方案：

方案1：直接提取文档body的子元素 #

当你解析的HTML片段只有一个根元素时，这个方法最直接——解析后的HTML会被自动包裹在完整的HTML结构里，目标元素就藏在<body>标签下的第一个子元素位置：

// 针对Document.parseHTMLUnsafe
const htmlDoc = Document.parseHTMLUnsafe('<div id="thing">Text</div>');
const targetElement = htmlDoc.body.firstElementChild;
console.log(targetElement instanceof HTMLElement); // => true

// 针对DOMParser
const domParserDoc = new DOMParser().parseFromString('<div id="thing">Text</div>', 'text/html');
const domTargetElement = domParserDoc.body.firstElementChild;
console.log(domTargetElement instanceof HTMLElement); // => true

如果你的HTML片段有多个根元素，可以用htmlDoc.body.children遍历所有子元素，按需获取。

方案2：使用Range.createContextualFragment #

这个方法可以直接将HTML字符串解析为DocumentFragment（一种轻量的DOM容器），不需要生成完整的HTML文档，灵活性更高，尤其适合处理多元素的HTML片段：

const fragment = document.createRange().createContextualFragment('<div id="thing">Text</div><p>Another element</p>');
// 获取第一个元素
const firstElement = fragment.firstElementChild;
// 遍历所有元素
for (const element of fragment.children) {
  console.log(element instanceof HTMLElement); // 所有元素都会返回true
}

// 还可以直接把fragment插入DOM
document.body.appendChild(fragment);

方案3：用querySelector精准定位（可选） #

如果你知道目标元素的选择器（不一定是ID），也可以直接在解析后的文档上调用querySelector，比getElementById更灵活：

const htmlDoc = Document.parseHTMLUnsafe('<div class="my-element">Text</div>');
const targetElement = htmlDoc.querySelector('.my-element');
console.log(targetElement instanceof HTMLElement); // => true

总结哪种方案最优？ #

• 若你只需要解析单个根元素：优先用方案1，代码最简洁直接。
• 若要处理多元素片段或需要直接操作DOM片段：方案2是最佳选择，避免了完整HTML文档的冗余结构。
• 若你需要精准定位特定元素（比如通过类名、标签名）：方案3更合适，但依赖选择器的准确性。

getElementById仅适合你明确知道元素ID的场景，通用性不如上面几种方法，不推荐作为通用解决方案。

内容的提问来源于stack exchange，提问作者rugk