如何使用JavaScript处理多个拥有相同ID的元素？

嘿，这个场景我太熟悉了——碰到不规范的重复ID页面，又没法改源码，确实头疼！咱们一步步来解决你的问题：

先明确一个关键点：HTML规范里ID必须是页面唯一的，重复ID本身就是不符合标准的写法。那实际浏览器里的表现呢？主流浏览器（Chrome、Firefox、Edge这些）都会返回页面中第一个出现的带该ID的元素——也就是你示例里包含<p class="xyz">10</p>的那个div。但这只是浏览器的容错行为，不是标准规定的，不同环境可能有差异，绝对不能依赖这个结果来做稳定的功能哦。

既然ID不靠谱，咱们就换个思路，利用p标签里的唯一文本内容来找到对应的父级div。这里给你几个实用的方法：

方法1：遍历所有目标p标签，匹配内容后获取父div #

这是最直观的方法，先选中所有class为xyz的p标签，逐个检查内容，找到匹配的再取它的父div：

// 假设我们要找内容为"20"的p标签对应的div
const targetText = "20";
const allPTags = document.querySelectorAll('.xyz');

allPTags.forEach(pTag => {
  // 用trim()去掉文本前后的空格、换行，避免匹配失败
  if (pTag.textContent.trim() === targetText) {
    const targetDiv = pTag.parentElement;
    // 在这里执行你需要的操作，比如修改样式、添加内容
    targetDiv.style.border = "2px solid blue";
    console.log("找到目标div啦：", targetDiv);
  }
});

方法2：用XPath直接定位（适合精准查找） #

XPath可以直接根据文本内容定位元素，然后一步拿到父级div，代码更简洁：

const targetText = "20";
// 构建XPath表达式：找到class为xyz且文本是targetText的p标签，再取它的父div
const xpath = `//p[@class='xyz' and text()='${targetText}']/parent::div`;
const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
const targetDiv = result.singleNodeValue;

if (targetDiv) {
  // 执行你的操作，比如修改背景色
  targetDiv.style.backgroundColor = "#f5f5f5";
}

方法3：针对数字内容的类型匹配（可选优化） #

如果p标签里的内容都是数字，可以把文本转成数字再比较，避免因为空格、换行导致的匹配问题：

const targetNum = 20;
const allPTags = document.querySelectorAll('.xyz');

allPTags.forEach(pTag => {
  const contentNum = parseInt(pTag.textContent.trim(), 10);
  // 先判断转成数字是否有效，再匹配目标值
  if (!isNaN(contentNum) && contentNum === targetNum) {
    const targetDiv = pTag.parentElement;
    // 执行你的操作
  }
});

如果页面是动态加载内容（比如通过AJAX渲染的），记得要等元素加载完成后再执行这些代码哦。可以把代码放在DOMContentLoaded事件回调里，或者用MutationObserver监听页面元素的变化，确保能找到目标元素。

内容的提问来源于stack exchange，提问作者Taksh Pratap Singh