网页类名重复时，如何获取指定父容器下的目标类元素值

这问题我之前做项目时也踩过坑——全局搜类名肯定会拿到所有匹配的元素，核心就是要把查找范围限定在目标父容器内。

你的原代码用document.getElementsByClassName('currency-coins value')是全局搜索所有带这两个类的元素，所以会拿到60个结果。我们需要调整选择逻辑，只在auctionValue容器里找目标元素。

方法一：用CSS选择器直接精准匹配 #

最简洁的方式是用querySelectorAll，通过复合选择器直接定位到auctionValue下的目标元素：

let currencyValues = [];
function highlightDeal() {
  // 关键：只选择.auctionValue容器下，同时拥有currency-coins和value类的元素
  let targetElements = document.querySelectorAll('.auctionValue .currency-coins.value');
  
  targetElements.forEach(element => {
    // 加trim()可以去掉文本里多余的空格或换行
    currencyValues.push(element.innerHTML.trim());
  });
  
  console.log(currencyValues);
}
highlightDeal();

这里的选择器.auctionValue .currency-coins.value要注意：

• .auctionValue指定父容器的类
• 后面的.currency-coins.value表示同一个元素同时拥有这两个类（中间没有空格，这是和“子元素选择”的关键区别）

方法二：先遍历父容器，再找子元素 #

如果需要对每个auctionValue容器做额外处理（比如判断容器是否有效），可以先获取所有父容器，再在每个容器内查找目标元素：

let currencyValues = [];
function highlightDeal() {
  // 先拿到所有auctionValue容器
  let auctionContainers = document.getElementsByClassName('auctionValue');
  
  // 遍历每个容器
  for (let container of auctionContainers) {
    // 在当前容器范围内查找目标元素
    let targetElement = container.querySelector('.currency-coins.value');
    
    // 防止某些容器可能没有目标元素，加个判断
    if (targetElement) {
      currencyValues.push(targetElement.innerHTML.trim());
    }
  }
  
  console.log(currencyValues);
}
highlightDeal();

这两种方法都能帮你过滤掉其他容器（比如auctionStartPrice）里的同名元素，只拿到你需要的auctionValue下的数值。

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