如何获取textContent包含‘circle’的第二个div DOM元素（无需遍历）

架构老林

2026-7-18

获取指定文本内容的第二个DOM元素

首先注意你提供的HTML代码里第二个div存在语法错误，class属性缺少等号，修正后的代码应为：

<div class="header circle">this is the header</div>
<div class="header circle"> this is the header of circle</div>

要直接获取textContent包含“circle”的第二个div元素，无需先获取所有元素再循环筛选，可以用XPath表达式直接定位（CSS选择器不支持基于文本内容的筛选，XPath更适合这类场景）：

实现代码

// 执行XPath查询，直接定位第二个符合条件的div
const xpathQuery = "//div[contains(text(), 'circle')][2]";
const targetElement = document.evaluate(
  xpathQuery,
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
).singleNodeValue;

// 验证结果
if (targetElement) {
  console.log(targetElement.textContent);
}