如何通过forEach将对应图片的figcaption文本传入弹窗finalCaption标签？

问题根源 #

你遇到的[HTML ObjectCollection]是因为：

• getElementsByClassName()返回的是元素集合，不是文本内容，直接赋值会把集合对象转成字符串形式输出。
• .caption并不是点击的img的子元素，而是和它同级的兄弟元素，需要从img所在的figure容器里定位对应的caption。

修复后的代码 #

直接修改你原有的forEach逻辑，通过点击的图片找到对应的figcaption，再提取文本内容赋值给弹窗：

document.querySelectorAll('.image-container img').forEach(image => {
    image.onclick = () => {
        const popup = document.querySelector('.popup-image');
        const popupImg = popup.querySelector('img');
        const popupCaption = popup.querySelector('.finalCaption');
        
        // 显示弹窗
        popup.style.display = 'block';
        // 设置弹窗图片地址
        popupImg.src = image.getAttribute('src');
        
        // 找到当前图片对应的figcaption并提取文本
        const currentCaption = image.closest('figure').querySelector('.caption').textContent;
        // 把文本赋值给弹窗的标题容器
        popupCaption.textContent = currentCaption;
    }
});

可选简化写法 #

如果你的HTML结构固定（img和figcaption始终是figure内的同级元素），也可以直接用兄弟元素定位：

// 替换上面的currentCaption获取行
const currentCaption = image.nextElementSibling.textContent;

关键细节说明 #

• 用textContent获取纯文本内容，比innerHTML更安全，能避免意外注入HTML代码。
• closest('figure')会向上查找最近的figure父容器，即使后续HTML结构微调也能适配，比硬写父元素层级更健壮。

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