原生JS：查找仅包含文本内容的所有DOM元素

嘿，这个问题我之前踩过坑！你说的typeof返回object是正常的——因为所有DOM节点（不管是文本还是元素）都是对象类型，所以靠typeof根本区分不开。要搞定这个，得用DOM节点自带的nodeType属性，这是最靠谱的判断方式。

核心区分逻辑 #

每个DOM节点的nodeType对应不同的数值常量：

• 元素节点（比如<div>、<p>）：nodeType === Node.ELEMENT_NODE（数值是1）
• 文本节点：nodeType === Node.TEXT_NODE（数值是3）
• 其他类型比如注释节点是8，文档节点是9，这些我们暂时不用管

实现获取仅含纯文本的元素 #

你的需求是找到只包含文本、没有任何其他元素节点的DOM元素，还要排除那些空内容（比如只有空格/换行）的元素。可以这么写代码：

// 获取所有符合要求的元素
const textOnlyElements = Array.from(document.querySelectorAll('*')).filter(element => {
  // 先过滤掉子节点里的空白文本节点（比如换行、空格）
  const validChildNodes = Array.from(element.childNodes).filter(node => {
    if (node.nodeType === Node.TEXT_NODE) {
      // 只保留有实际内容的文本节点
      return node.textContent.trim() !== '';
    }
    // 非文本节点直接保留，用来后续判断是否存在
    return true;
  });

  // 只有当所有有效子节点都是文本节点时，才符合条件
  return validChildNodes.every(node => node.nodeType === Node.TEXT_NODE);
});

// 打印结果看看
console.log(textOnlyElements);

代码解释 #

1. 先用document.querySelectorAll('*')拿到页面上所有DOM元素，转成数组方便操作
2. 对每个元素，先处理它的子节点：把那些只有空白字符的文本节点过滤掉（避免把<div> </div>这种空元素误判成文本元素）
3. 最后检查剩下的有效子节点是不是全都是文本节点——如果是，就说明这个元素里没有其他元素，只有纯文本

额外提示 #

如果你需要兼容非常旧的浏览器（不支持Node常量），直接写数值也可以：比如用nodeType === 1代替Node.ELEMENT_NODE，nodeType === 3代替Node.TEXT_NODE，效果是一样的。

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