单元测试中模拟HTMLElement的最佳方法及解析工具返回HTMLDocument的问题

你遇到的问题核心是：Document.parseHTMLUnsafe和DOMParser返回的是整个HTMLDocument对象，而非单个HTMLElement，导致instanceof HTMLElement判断不通过。以下是几种比getElementById更简便的提取方案：

1. 直接取body的第一个子元素（适合单个元素的HTML片段） #

如果你的测试HTML是单个元素（比如<button>click</button>），解析后直接取文档body的firstElementChild就能拿到目标元素：

// DOMParser示例
const parser = new DOMParser();
const doc = parser.parseFromString('<div class="test">示例内容</div>', 'text/html');
const targetEl = doc.body.firstElementChild;

// Document.parseHTMLUnsafe示例
const doc = Document.parseHTMLUnsafe('<p>测试段落</p>');
const targetEl = doc.body.firstElementChild;

这种方式不需要给元素加id，写法更简洁。

2. 用querySelector筛选元素（适合多元素或精准匹配场景） #

如果解析的HTML包含多个元素，或者需要按类名、标签名等筛选，直接在HTMLDocument上调用querySelector即可：

const doc = Document.parseHTMLUnsafe(`
  <div class="container">
    <span id="foo">文本</span>
  </div>
`);
// 按类名取容器元素
const containerEl = doc.querySelector('.container');
// 按标签名取span元素
const spanEl = doc.querySelector('span');

querySelector支持CSS选择器，灵活性远高于依赖id。

3. （可选）调整判断逻辑兼容HTMLDocument #

如果不想修改测试中的元素获取逻辑，也可以扩展判断条件，让它同时兼容HTMLDocument（自动提取内部元素）：

function isValidElement(thing) {
  if (thing instanceof HTMLElement) {
    return true;
  }
  if (thing instanceof HTMLDocument) {
    return thing.body.firstElementChild instanceof HTMLElement;
  }
  return false;
}

不过这种方式不如直接提取元素直观，仅推荐作为临时兼容方案。

补充调试提示 #

typeof thing始终返回object是正常现象——HTMLDocument和HTMLElement都属于引用类型，typeof对所有引用类型都会返回object。调试时可以用以下方式更精准判断：

• 用thing.nodeType：元素的nodeType为1，HTMLDocument的nodeType为9
• 打印thing.constructor.name，会直接显示HTMLElement或HTMLDocument

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