如何获取最外层DOM元素的非子元素文本？Chrome扩展开发求助

要实现点击div时仅获取其直接文本内容（排除所有子元素的文本），可以通过遍历元素的childNodes筛选纯文本节点并拼接，同时处理空白字符优化输出：

修改后的getData函数 #

function getData(e) {
  const targetDiv = e.currentTarget;
  let directText = '';
  // 遍历所有子节点，筛选文本节点
  for (const node of targetDiv.childNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
      directText += node.textContent;
    }
  }
  // 清理多余空白和换行，输出整洁文本
  return directText.trim().replace(/\s*\n\s*/g, '\n');
}

关键说明 #

• Node.TEXT_NODE（对应数值3）用于判断节点是否为纯文本节点，避免混入子元素的文本
• 使用childNodes而非children，因为children仅包含元素节点，会漏掉目标div的直接文本节点
• 最后通过trim()和正则替换，去除首尾空白并合并多余换行，让输出符合预期格式

适配动态生成元素 #

如果目标div是动态添加的，采用事件委托绑定点击事件，确保新元素也能触发逻辑：

// 绑定到合适的父元素（示例为document.body，可根据实际DOM结构调整）
document.body.addEventListener('click', function(e) {
  const target = e.target.closest('.msg');
  if (target) {
    const resultText = getData(e);
    // 这里可以添加对获取到的文本的处理逻辑，比如打印或存储
    console.log(resultText);
  }
});

示例验证 #

中文翻译后的示例DOM结构：

<div class="msg">
我从小就把画画当作业余爱好。那时候我根本不知道自己有什么天赋。我相信天赋不过是持之以恒的兴趣而已。

任何人都能做到我做的事。回去再添一棵快乐的小树就好。每个人都是不同的，树也一样。

让它们保持各自的个性。我们在这里那里添些快乐的小叶子。这些都是自然而然发生的。

<reactions class="xyz">
 <reaction class="ABC">
  <span> 27 </span>
  <span> 2 </span>
  <span> 12 </span>
 </reaction>
</reactions>

</div>

调用getData后将得到预期输出：

我从小就把画画当作业余爱好。那时候我根本不知道自己有什么天赋。我相信天赋不过是持之以恒的兴趣而已。
任何人都能做到我做的事。回去再添一棵快乐的小树就好。每个人都是不同的，树也一样。
让它们保持各自的个性。我们在这里那里添些快乐的小叶子。这些都是自然而然发生的。

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