如何用JavaScript检查HTML文档是否为空且不触发布局重排？

问题背景 #

需要判断指定HTML元素（如div）是否为空——即内部无可见文本、无子元素，呈现纯空白状态。原有实现代码存在明显缺陷：

function isPageEmpty(page) {
    const paragraphNodes = page.querySelectorAll(".paragraph");
    if ((paragraphNodes[0].children[0]).innerText !== "") {
      return false;
    }

    return true;
}

原有代码的问题 #

• 通用性极差：依赖固定选择器.paragraph和硬编码的子元素层级，页面结构稍有变动就会失效
• 性能损耗：调用innerText会触发浏览器强制样式重计算（重排重绘），频繁调用时影响页面性能
• 逻辑不完整：未处理全空白文本（如空格、换行）、注释节点等情况，会出现误判

最优实现方案 #

1. 通用DOM节点检查（推荐）

直接遍历元素的所有子节点，过滤掉无意义的空白文本和注释节点，判断是否存在有效内容：

function isElementEmpty(element) {
  for (const node of element.childNodes) {
    // 存在子元素，直接判定非空
    if (node.nodeType === Node.ELEMENT_NODE) {
      return false;
    }
    // 文本节点去除首尾空白后仍有内容，判定非空
    else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
      return false;
    }
    // 注释节点直接忽略
  }
  return true;
}

优势：

• 准确性高：覆盖所有节点类型，避免空白文本、注释的干扰
• 性能优异：使用textContent而非innerText，不会触发样式计算
• 通用性强：适用于任何HTML元素，不依赖特定结构

2. 简化版：利用innerHTML检查（适合简单场景）

如果能确定元素内部不会出现注释、隐藏元素等干扰项，可使用更简洁的实现：

function isElementEmpty(element) {
  return element.innerHTML.trim() === '';
}

注意：若元素内部存在注释节点（如<!-- 注释 -->）或隐藏元素，该方法会误判为非空，仅适合结构简单的场景。

3. 页面级空白检查（专用场景）

如果是检查整个页面是否为纯空白，需要排除script、style等功能性不可见元素：

function isPageEmpty() {
  const ignoreTags = new Set(['script', 'style', 'link', 'meta']);
  for (const node of document.body.childNodes) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      const tagName = node.tagName.toLowerCase();
      if (!ignoreTags.has(tagName)) {
        return false;
      }
    } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
      return false;
    }
  }
  return true;
}

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