如何使用document.getElementsByClassName选取HTML指定类的最后一个元素

document.getElementsByClassName() 返回的是一个动态HTMLCollection（类数组对象），要取其中最后一个元素，直接利用集合的长度就能实现，步骤很简单：

1. 先获取目标类对应的所有元素集合
2. 通过 集合长度 - 1 定位最后一个元素（因为类数组的索引从0开始）
3. 一定要先判断集合是否有元素，避免索引越界报错

完整代码示例 #

// 替换成你实际要查找的类名
const targetElements = document.getElementsByClassName('your-target-class');

// 确保存在该类的元素
if (targetElements.length > 0) {
  const lastElement = targetElements[targetElements.length - 1];
  // 这里可以对最后一个元素做操作，比如修改样式或内容
  lastElement.style.backgroundColor = '#f0f0f0';
  console.log('找到的最后一个元素:', lastElement);
} else {
  console.log('页面中没有该类的元素');
}

补充说明 #

• HTMLCollection是动态的：如果后续DOM中该类的元素有增删，这个集合会自动更新，所以每次取最后一个时都要重新检查长度
• 如果需要不受后续DOM变化影响的静态集合，可以先转成数组，还能用ES2022+的at()方法更简洁地取最后一个：

  const staticElements = Array.from(document.getElementsByClassName('your-target-class'));
  const lastStaticElement = staticElements.at(-1);
  

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