如何使用父级上的数据属性向图像添加替代文本？

Question

我正在尝试通过将数据属性分配给该图像的父容器来确定如何将 alt-text 属性添加到该图像。

基本上，我添加到data-alt 的任何文本都会在img 元素上分配为alt-text。

如何编写属性以便将其作为alt-text 应用于图像，而不是父图像？

我想在代码编辑器中输入的内容：

<div class="image-parent" data-alt="hello world">
    <img src="path/to/image">
</div>

我想要的结果：

<div class="image-parent">
  <img src="path/to/image" alt="hello world">
</div>

这是我尝试过的，但我不明白如何将数据属性应用于图像的子元素。

let imgParentContainers = document.querySelector('.image-parent');
let dataAlt = imgParentContainers.setAttribute('data-alt', '');

<div class="image-parent" data-alt="alt text here">
  <img src="https://apkdoll.com/wp-content/uploads/2021/08/HOLLA-Live-Random-Video-Chat-MOD-APK.png">
</div>

Answer 1

您需要进行一些改进才能达到您想要的目标状态：

1. 不清楚为什么要使用setAttribute() 从属性中获取数据。顾名思义，它仅用于设置属性的值。更好的尝试是使用getAttribute()，但在这种情况下，由于您访问的是data-* 元素，您可能应该改用HTMLElement.dataset。
2. 除非您预计只有一个具有类 image-parent 的元素，否则您绝对应该将 querySelector 的使用替换为 querySelectorAll，以确保您获得任何/所有匹配项的 NodeList，而不仅仅是第一个匹配项在 DOM 中找到。在这种情况下，您还必须为 (a) 与您的 .image-parent 选择器匹配的所有父容器使用循环，并为 (b) 该容器中的每个 img 元素使用另一个循环。
3. 在调用 querySelector/querySelectorAll 时，请更具体地使用 CSS 选择器，以避免与尝试通过匹配在第一名。
4. 您想要的最终结果显示父容器元素上不再存在data-alt 属性；如果这实际上是理想的目标，那么您似乎没有尝试在您的 sn-p 中这样做。为此请使用 removeAttribute()。

let imgParentContainers = [...document.querySelectorAll('.image-parent[data-alt]')];
imgParentContainers.forEach(parentContainer => {
    [...parentContainer.querySelectorAll('img')].forEach(imgElement => {
        imgElement.setAttribute('alt', parentContainer.dataset.alt);
    });
    parentContainer.removeAttribute('data-alt');
});

<div class="image-parent" data-alt="alt text here">
  <img src="https://apkdoll.com/wp-content/uploads/2021/08/HOLLA-Live-Random-Video-Chat-MOD-APK.png">
</div>

---

将来，您可能会发现使用首选搜索引擎来研究需求的每个单独组件（附加您选择的语言；在本例中为 JavaScript）以更好地了解您应该使用的方法很有用希望使用它来实现您的目标。例如，对于解决方案的每个组件，以下 Google 搜索仅在此站点上就产生了几个预先存在的线程：

• “读取属性值javascript”产生How to get the value of an attribute in Javascript
• “返回所有匹配的queryselector javascript”产生How to get the second match with QuerySelector?
• “删除属性 javascript”产生How to remove an attribute from a DOM element using Javascript?