如何在JavaScript中获取元素的全部textNode（含所有位置文本）？

嘿，我完全懂你的困扰！你现在的代码只抓到了部分文本节点，漏掉了像text4这种直接挂在目标元素下的文本节点——没错，用childNodes数组绝对是正确的思路，因为它能拿到目标元素下所有类型的子节点，不像children只返回元素节点，会把纯文本节点给漏掉。

核心思路 #

要拿到所有文本节点，我们需要：

• 遍历目标元素的childNodes（而不是children），因为它包含文本、元素、注释等所有子节点
• 递归遍历每个子节点：如果是文本节点就收集起来，如果是元素节点就继续深入遍历它的子节点
• 可选：过滤掉纯空白的文本节点（很多时候页面里会有大量换行、空格组成的空文本节点，根据你的需求决定要不要保留）

代码实现 #

function getAllTextNodes(targetElement) {
  const textNodeList = [];

  // 递归遍历节点的函数
  function traverse(node) {
    // 遍历当前节点的所有子节点
    for (const child of node.childNodes) {
      // 判断是不是文本节点（Node.TEXT_NODE 的值是3）
      if (child.nodeType === Node.TEXT_NODE) {
        // 可选：过滤纯空白文本，不需要的话直接push(child)就行
        const cleanText = child.textContent.trim();
        if (cleanText) {
          textNodeList.push({
            textNode: child,
            content: cleanText
          });
        }
      } 
      // 如果是元素节点，继续递归遍历它的子节点
      else if (child.nodeType === Node.ELEMENT_NODE) {
        traverse(child);
      }
    }
  }

  // 开始遍历目标元素
  traverse(targetElement);
  return textNodeList;
}

// 使用示例
const yourElement = document.querySelector('.your-target-element'); // 替换成你的选择器
const allTextNodes = getAllTextNodes(yourElement);

// 查看结果
allTextNodes.forEach(item => {
  console.log('文本节点:', item.textNode);
  console.log('对应文本:', item.content);
});

为什么之前的代码漏掉了text4？ #

之前的代码大概率只遍历了目标元素的children（子元素节点），然后从这些子元素里取文本，但text4是直接作为目标元素的子文本节点存在的，不是任何子元素的后代，所以children里根本找不到它，只有childNodes才会包含这类节点。

这样调整后，就能把所有文本节点（包括text4这种“游离”的）都抓到手啦！

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