如何用JavaScript动态修改<figure>内<img>的src属性

修改

内的src属性时遇到的问题及解决方法 #

问题场景 #

我想修改HTML <figure> 标签里嵌套的<img>元素的src属性，结果发现<figure>本身根本没有src属性（可能是我之前理解错了）。我的页面代码如下：

<figure data-asset-id="dfdsf"><img src="https:/assets/conference-gffe9859b2_640.jpg" data-asset-id="dfdsf" data-image-id="dfdsf" alt="conference pic"></figure>

奇怪的是，当我对这个<figure>元素调用document.getAttribute()方法时，返回的居然是整个<img>标签的字符串：

<img src="https://assets/conference-gffe9859b2_640.jpg" data-asset-id="dfdsf" data-image-id="dfdsf" alt="conference pic">

我尝试用DOMParser把这个字符串转成HTML元素，但没成功，想知道哪里操作错了？

为了帮助不熟悉<figure>元素的人，补充一下它的标准结构：

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

问题分析 #

1. <figure>是语义化容器标签，本身确实没有src属性，src是<img>元素的专属属性，用来指定图片资源地址。
2. 你调用getAttribute()却返回<img>的HTML字符串，大概率是没有传入具体属性名，或者误调用了innerHTML这类获取元素内部HTML的方法。正常情况下，调用figure.getAttribute('src')应该返回null，因为<figure>不存在这个属性。
3. 用DOMParser转换字符串失败的话，可能是写法不对。正确的转换代码应该是这样的：

const imgStr = '<img src="https://assets/conference-gffe9859b2_640.jpg" data-asset-id="dfdsf" data-image-id="dfdsf" alt="conference pic">';
const parser = new DOMParser();
const doc = parser.parseFromString(imgStr, 'text/html');
const imgEle = doc.querySelector('img');

如果还是失败，检查一下字符串本身是否有格式错误（比如引号不闭合）。

可行解决方案 #

你给出的代码能实现需求，不过可以优化得更可靠：

// 选中目标figure元素
const figureEle = document.querySelector("[data-asset-id='dfdsf']");
// 直接获取内部的img元素，避免childNodes[0]可能拿到空白文本节点的问题
const imgEle = figureEle.querySelector('img');
// 修改src属性
imgEle.setAttribute('src', newURL);

用querySelector('img')比childNodes[0]更稳定，因为如果<figure>标签内存在换行或空格，childNodes[0]可能会获取到文本节点而非<img>元素。

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