如何通过父元素的data属性为子img标签设置alt属性值？

修正后的实现代码 #

如果脚本放在页面底部、DOM渲染完成后执行，可以直接用以下代码：

// 选中所有携带data-alt属性的.image-parent容器
const imgParentContainers = document.querySelectorAll('.image-parent[data-alt]');

// 遍历所有容器逐一处理
imgParentContainers.forEach(parentEl => {
  // 读取父容器存储的alt文本
  const altVal = parentEl.dataset.alt;
  // 查找容器内的img元素
  const imgEl = parentEl.querySelector('img');

  // 判空避免控制台报错
  if (imgEl && altVal) {
    imgEl.setAttribute('alt', altVal);
  }
  // 移除父容器上的data-alt属性，符合最终渲染要求
  parentEl.removeAttribute('data-alt');
});

如果脚本放在head标签内，需要包裹DOM加载完成监听，避免找不到元素：

document.addEventListener('DOMContentLoaded', () => {
  const imgParentContainers = document.querySelectorAll('.image-parent[data-alt]');
  imgParentContainers.forEach(parentEl => {
    const altVal = parentEl.dataset.alt;
    const imgEl = parentEl.querySelector('img');
    if (imgEl && altVal) {
      imgEl.setAttribute('alt', altVal);
    }
    parentEl.removeAttribute('data-alt');
  });
});

原代码问题说明 #

• 使用querySelector只会匹配页面第一个.image-parent容器，多容器场景下会失效
• 直接调用setAttribute把data-alt设置为空值，没有读取原有属性值，也没有完成子img元素的赋值逻辑

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