如何在JS浏览器环境提取<dt>Venues</dt>到下一个<dt>间的<dd>元素

我懂你的痛点——原来的XPath会把所有后续的<dd>都捞出来，哪怕是属于其他<dt>的内容。不用count()也能完美解决，核心思路是只保留那些最后一个前置<dt>是"Venues"的<dd>，这样就能自动过滤掉后续其他<dt>对应的内容。

正确的XPath表达式 #

//dt[text()='Venues']/following-sibling::dd[preceding-sibling::dt[last()]/text()='Venues']

浏览器JavaScript中使用的完整示例 #

打开浏览器控制台，运行这段代码就能拿到目标场馆列表：

// 用XPath查询匹配的节点
const xpathExpr = "//dt[text()='Venues']/following-sibling::dd[preceding-sibling::dt[last()]/text()='Venues']";
const venueSnapshot = document.evaluate(
  xpathExpr,
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);

// 提取文本内容
const venues = [];
for (let i = 0; i < venueSnapshot.snapshotLength; i++) {
  venues.push(venueSnapshot.snapshotItem(i).textContent.trim());
}

console.log(venues); // 输出: ["Madison Square Garden", "Wembley"]

逻辑解释 #

让我们拆解一下这个XPath的工作原理：

1. //dt[text()='Venues']：先定位到文本为"Venues"的<dt>节点
2. /following-sibling::dd：选取该<dt>的所有后续<dd>兄弟节点
3. [preceding-sibling::dt[last()]/text()='Venues']：关键过滤条件
   • 对每个候选<dd>，找到它所有前置<dt>中的最后一个（也就是离它最近的那个<dt>）
   • 只有当这个最近的<dt>文本是"Venues"时，才保留该<dd>
   • 当后续出现其他<dt>（比如"Event"、"Series"）时，对应的<dd>的最近<dt>就变成了这些新的标签，自然会被排除

这种写法完全不用依赖固定的节点数量，不管<dl>里后续有多少个<dt>和<dd>，都能精准提取到"Venues"对应的场馆列表。

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