React中如何获取DOM容器的倒数第二个子元素

数据老陈

2026-10-3

获取容器倒数第二个子元素的实现方法

所有标准DOM元素都内置了children只读属性，它会返回包含所有直接子元素的实时HTMLCollection类数组对象，支持按索引访问元素，完全满足你的需求。

实现方式

方式1：按子元素位置直接获取（适用于确定子元素排列顺序固定的场景）

直接通过children的长度计算倒数第二个元素的索引即可，示例代码如下：

// 假设你已经获取到容器元素，赋值给了container变量
const childTotal = container.children.length;
// 先判断子元素数量是否足够，避免索引报错
if (childTotal >= 2) {
  const secondLastEl = container.children[childTotal - 2];
  // 修改背景色
  secondLastEl.style.backgroundColor = '#你需要的色值';
}

方式2：筛选指定类型元素后获取（更稳妥的通用方案）

如果容器内可能插入其他类型的子元素，无法保证popover固定在倒数第二位，可以先筛选出所有popover元素再取倒数第二个，示例如下：

// 假设你的popover元素有自定义属性data-component="popover"，或者有统一类名.popover
const allPopovers = container.querySelectorAll('[data-component="popover"]');
const popoverTotal = allPopovers.length;
if (popoverTotal >= 2) {
  const targetPopover = allPopovers[popoverTotal - 2];
  targetPopover.style.backgroundColor = '#你需要的色值';
}