如何使用JavaScript定位同class组中文本为C的特定span元素

不用依赖元素位置的话，有两种实用方法可以实现：

方法1：遍历筛选匹配文本 #

先获取所有目标类名的span，再通过文本内容筛选：

// 获取所有带.letter类的span
const allLetterSpans = document.querySelectorAll('.letter');
// 转成数组后筛选出文本为"C"的元素
const targetSpan = Array.from(allLetterSpans).find(span => span.textContent.trim() === 'C');

// 找到后可进行操作
if (targetSpan) {
  console.log('目标元素已找到', targetSpan);
  // 示例：修改样式
  targetSpan.style.backgroundColor = '#f0f0f0';
}

方法2：用XPath直接匹配 #

XPath支持直接根据文本内容定位元素，兼容性较好：

// 通过XPath定位class为letter且文本是"C"的span
const result = document.evaluate(
  '//span[@class="letter" and text()="C"]',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const targetSpan = result.singleNodeValue;

if (targetSpan) {
  console.log('目标元素已找到', targetSpan);
}

注意点 #

• 加trim()是为了避免文本前后的空白字符导致匹配失败，如果确定文本没有多余空白可以去掉
• 两种方法都不受元素位置变化影响，只要文本内容符合就能匹配到

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