使用Puppeteer时，如何排除querySelector目标元素的嵌套类文本？

要获取.pdp_price元素本身的文本（排除嵌套的.price_feature子元素文本），可以用以下几种可靠的方式：

方法一：提取文本节点内容 #

直接筛选父元素下的文本节点，忽略子元素节点：

const data = await page.evaluate(() => {
  const address = document.querySelector('#app > div > div > article > div.pdp_header > div > div > h1').innerText.replaceAll('\n',',');
  const bed = document.querySelector('.bed')?.innerText || "";
  const bath = document.querySelector('.bath')?.innerText || "";
  const car = document.querySelector('.car')?.innerText || "";
  
  // 提取父元素的文本节点内容
  const priceElement = document.querySelector('.pdp_price');
  const priceText = Array.from(priceElement.childNodes)
    .filter(node => node.nodeType === Node.TEXT_NODE) // 只保留文本节点
    .map(node => node.textContent.trim()) // 去除文本两端空格
    .join(''); // 拼接成完整文本

  return `${address}, ${priceText}, ${bed}, ${bath}, ${car} \n`;
});

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

通过克隆父元素，移除嵌套的子元素后再获取文本，避免修改原DOM结构：

const data = await page.evaluate(() => {
  const address = document.querySelector('#app > div > div > article > div.pdp_header > div > div > h1').innerText.replaceAll('\n',',');
  const bed = document.querySelector('.bed')?.innerText || "";
  const bath = document.querySelector('.bath')?.innerText || "";
  const car = document.querySelector('.car')?.innerText || "";
  
  // 克隆元素并移除子元素
  const priceClone = document.querySelector('.pdp_price').cloneNode(true);
  priceClone.querySelector('.price_feature').remove();
  const priceText = priceClone.innerText.trim();

  return `${address}, ${priceText}, ${bed}, ${bath}, ${car} \n`;
});

你之前尝试失败的原因 #

• .pdp_price:not(.price_feature) 这个选择器依然会选中.pdp_price元素，:not()是排除自身带有指定类的元素，而非排除子元素。
• 第二种尝试中，innerText返回的是字符串，不存在remove()方法，逻辑本身不成立。

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