如何在不修改.in-featuredlisting的前提下捕获其未包裹的文本内容？

当然有办法搞定这个问题！这种游离在标签外的文本节点确实容易让人头疼，毕竟常规的CSS选择器只能定位元素，没法直接选中文本节点。下面给你两种可靠的JavaScript解决方案：

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

通过childNodes获取容器的所有子节点（包括文本、元素、注释等），然后筛选出有效文本节点：

// 获取目标容器
const container = document.querySelector('.in-featuredlisting');
// 遍历子节点，筛选出非空的文本节点
const targetText = Array.from(container.childNodes)
  .filter(node => node.nodeType === Node.TEXT_NODE) // 只保留文本节点
  .map(node => node.textContent.trim()) // 去除文本前后的空白
  .filter(text => text !== '') // 过滤掉空文本（比如换行、空格）
  .shift(); // 取第一个有效文本

console.log(targetText); // 输出："lorem ipsum, bla, bla, bla"

这种方法的好处是不用依赖文本节点的位置，只要它是容器内的直接子文本节点就能找到。

方法二：定位到相邻元素后获取后续文本 #

既然目标文本在<p>标签的后面，我们可以先选中这个<p>，再通过nextSibling拿到它后面的文本节点：

// 获取日期标签
const dateTag = document.querySelector('.in-featuredlisting p.sub-text');
// 拿到它后面的文本节点，去除空白
const targetText = dateTag.nextSibling.textContent.trim();

console.log(targetText);

需要注意的是，如果<p>标签和目标文本之间有换行或空格，nextSibling可能先拿到空白的文本节点，这时候可以多调用几次nextSibling直到找到非空的文本节点，或者结合方法一的过滤逻辑来处理。

为什么你的CSS选择器没用？ #

你之前尝试的.in-featuredlisting p +选择器是用来选中<p>后面的元素节点的，但目标是未被包裹的文本节点，CSS选择器本身不支持直接选中文本节点，所以这种方法自然无效，必须用JavaScript来操作DOM节点才能捕获到它。

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