如何从多文本节点元素中选择单个文本节点？已尝试选择器无效

首先得明确一点：CSS选择器无法直接选中文本节点，它只能定位到元素节点。你之前尝试的#specifications-2 > div.tab-specifications > div:nth-child(1)这类选择器，选中的是那个<div>元素本身，而不是它里面的文本节点。

如果要获取单个文本节点，通常得借助JavaScript来实现，下面给你两种常用的方法：

方法一：利用childNodes属性 #

假设你已经用CSS选择器定位到了目标元素，比如：

const targetElement = document.querySelector('#specifications-2 > div.tab-specifications > div:nth-child(1)');

然后可以通过childNodes访问它的子节点集合，文本节点的nodeType是3，所以你可以筛选出文本节点：

// 获取第一个非空白的文本节点
let targetTextNode = null;
for (const node of targetElement.childNodes) {
  if (node.nodeType === 3 && node.textContent.trim() !== '') {
    targetTextNode = node;
    break;
  }
}

// 如果只是要第一个文本节点（不管空白），直接取childNodes[0]
// const targetTextNode = targetElement.childNodes[0];

方法二：使用XPath查询 #

如果你可以用XPath，它支持直接选择文本节点，比如要选目标div下的第一个文本节点，可以这样写：

const xpathResult = document.evaluate(
  '//*[@id="specifications-2"]/div[@class="tab-specifications"]/div[1]/text()[1]',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const targetTextNode = xpathResult.singleNodeValue;

另外提一句，你之前写的div[1]是错误的CSS语法，CSS里选择第一个子元素要用:nth-child(1)或者:first-child，不过即使写对了，也还是选中元素，不是文本节点哦。

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