如何在JavaScript中获取同class名的特定div元素值？

我明白你的问题——当你用JavaScript获取class为hMZdhd的元素时，拿到的是所有匹配的元素集合，而不是你想要的那一个。这是因为像getElementsByClassName或者querySelectorAll这类方法会返回所有符合条件的元素，咱们可以通过几种方式精准定位目标：

方法1：通过索引直接选取（适合DOM结构稳定的场景） #

你的DOM里刚好有两个hMZdhd元素，第一个是包含权限列表的容器，第二个是时间文本。咱们可以用索引直接指定要哪一个（索引从0开始）：

// 获取第一个hMZdhd（权限内容）
const accessContainer = document.getElementsByClassName('hMZdhd')[0];
console.log(accessContainer.textContent);

// 获取第二个hMZdhd（时间文本）
const timeElement = document.getElementsByClassName('hMZdhd')[1];
console.log(timeElement.textContent);

如果用querySelectorAll写法也类似：

const timeElement = document.querySelectorAll('.hMZdhd')[1];
console.log(timeElement.textContent);

方法2：通过子元素特征定位（适合DOM结构可能变化的场景） #

如果担心后续页面结构调整，新增同class元素导致索引失效，可以通过元素内部的子元素来筛选。比如第一个hMZdhd里包含OcFGjf类的子元素，第二个没有：

// 精准定位包含OcFGjf子元素的hMZdhd
const accessContainer = document.querySelector('.hMZdhd:has(.OcFGjf)');
console.log(accessContainer.textContent);

// 定位不含该子元素的hMZdhd（时间元素）
const timeElement = document.querySelector('.hMZdhd:not(:has(.OcFGjf))');
console.log(timeElement.textContent);

注意：:has()选择器是现代浏览器支持的语法，如果要兼容旧版浏览器，换成遍历的方式也可以：

const allHMZdhd = document.getElementsByClassName('hMZdhd');
let targetAccessDiv;
for (const div of allHMZdhd) {
  if (div.querySelector('.OcFGjf')) {
    targetAccessDiv = div;
    break;
  }
}
console.log(targetAccessDiv.textContent);

方法3：通过文本内容特征筛选 #

如果时间的格式是固定的（比如类似March 20, 12:06 PM），还可以通过正则匹配文本内容来定位时间元素：

const allHMZdhd = document.getElementsByClassName('hMZdhd');
let targetTimeDiv;
for (const div of allHMZdhd) {
  const text = div.textContent.trim();
  // 匹配"月份 日期, 时间 AM/PM"的格式
  if (/^\w+ \d+, \d+:\d+ (AM|PM)$/.test(text)) {
    targetTimeDiv = div;
    break;
  }
}
console.log(targetTimeDiv.textContent);

总结一下：如果页面结构不会轻易变动，用索引是最简单的方式；如果结构可能调整，优先用子元素特征的方法，稳定性更高。

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