如何使用JS获取父元素文本且不包含子元素文本？

嘿，这个问题我之前也踩过坑！当你直接用element.textContent或者innerText获取父元素文本时，确实会把所有子元素的文本一并返回。要只提取父元素本身的文本节点内容，这里有几个实用的解决方案：

方法一：遍历子节点筛选文本节点 #

通过遍历父元素的所有子节点，只保留文本节点（nodeType === 3）的内容，同时过滤掉多余的空白字符：

const parent = document.querySelector('.parent-div');
let parentText = '';

// 遍历父元素的所有子节点
for (const node of parent.childNodes) {
  // 仅处理文本节点（Node.TEXT_NODE 的值就是3）
  if (node.nodeType === Node.TEXT_NODE) {
    const trimmed = node.textContent.trim();
    // 跳过空的文本节点（比如HTML里的换行、空格）
    if (trimmed) {
      parentText += `${trimmed} `;
    }
  }
}

// 最后整理结果，去除末尾多余空格
parentText = parentText.trim();
console.log(parentText); // 输出：parent div

方法二：克隆父元素并移除所有子元素 #

这种方法更直观：先克隆父元素，然后把克隆体里的所有子元素都移除，剩下的就是父元素自身的文本了：

const parent = document.querySelector('.parent-div');
// 深度克隆父元素（包含所有子节点）
const clonedParent = parent.cloneNode(true);

// 循环移除克隆体的所有子元素
while (clonedParent.firstChild) {
  clonedParent.removeChild(clonedParent.firstChild);
}

// 此时克隆体仅保留父元素自身的文本
const parentText = clonedParent.textContent.trim();
console.log(parentText); // 输出：parent div

注意事项 #

要确保你的HTML结构中，父元素确实存在独立的文本节点，比如：

<div class="parent-div">
  parent div <!-- 这是父元素自身的文本节点 -->
  <div class="child">子元素文本</div>
</div>

如果父元素的所有文本都嵌套在子元素里，那肯定无法提取到所谓的“父元素自身文本”哦~

内容的提问来源于stack exchange，提问作者Ra'ed Alaraj