JavaScript：获取含嵌套子元素的textContent并忽略指定子元素

这里有几种实用的方式可以实现你的需求，既保留目标文本（包括直接写在容器里的文本节点），又排除指定元素的内容：

方法1：遍历所有子节点（包括文本节点） #

直接遍历容器的childNodes，区分节点类型，跳过需要排除的元素，同时收集文本节点和其他元素的内容：

const container = document.querySelector('.container');
let targetText = '';

container.childNodes.forEach(node => {
  // 跳过带exclude-text类的元素节点
  if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('exclude-text')) {
    return;
  }
  // 收集文本（trim避免多余空格，最后再统一处理）
  targetText += node.textContent.trim() + ' ';
});

// 移除末尾多余空格
targetText = targetText.trim();
console.log(targetText); // 输出 "Add this text And this text here"

注：childNodes会包含所有类型的节点（文本、元素、注释等），所以要判断nodeType——元素节点是Node.ELEMENT_NODE（值为1），文本节点是Node.TEXT_NODE（值为3），这样就能捕获到"And this text here"这类直接写在容器里的文本。

方法2：克隆节点后移除排除元素（更简洁） #

先克隆容器节点（避免修改原DOM结构），移除要排除的元素，再获取textContent：

const container = document.querySelector('.container');
const clone = container.cloneNode(true);
// 移除指定元素
clone.querySelector('.exclude-text').remove();
// 清理多余空格
const targetText = clone.textContent.trim();
console.log(targetText);

这种方法代码量少，适合不需要复杂过滤的场景，缺点是如果容器里有大量子元素，克隆会有轻微性能损耗，但日常场景完全够用。

方法3：用NodeIterator过滤文本节点 #

通过NodeIterator精准筛选出符合要求的文本节点，排除父元素是指定类的文本：

const container = document.querySelector('.container');
const iterator = document.createNodeIterator(
  container,
  NodeFilter.SHOW_TEXT, // 只遍历文本节点
  {
    acceptNode: (node) => {
      // 如果文本节点的父元素是要排除的，就跳过
      if (node.parentElement?.classList.contains('exclude-text')) {
        return NodeFilter.FILTER_REJECT;
      }
      return NodeFilter.FILTER_ACCEPT;
    }
  }
);

let targetText = '';
let currentNode;
while (currentNode = iterator.nextNode()) {
  targetText += currentNode.textContent.trim() + ' ';
}
targetText = targetText.trim();
console.log(targetText);

这种方式更精准，适合需要复杂文本过滤的场景。

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