如何处理并获取接口返回带dom标签的字符串中的img标签的src属性并且遍历添加监听事件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 总结

---

前言

记录自己第一次遇到这个场景：页面中的内容和文字图片均由后端返回，包含了dom节点

`<p>阿士大夫撒地方</p>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAGXRFWHRTb2Z0d284lh19twAAAABJRU5ErkJggg==" alt="" srcset="">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAABQCAYAAACqCH1tAAAACXBIWXMAAAsTAAALSp9S1Un5Px3DBF6wjYuLcr/VRUvZ9LDf+UBJH5YluaNAAAAAElFTkSuQmCC" alt="" srcset="">`
       

   我需要获取图片中的src，将他们存入数组中供vantUI中的 ImagePreview 图片预览组件使用，并且添加监听事件，下面是处理方法。

       

---

async query(){
    let res = await api({a:111b:111})
    this.xxx = res.data.xxx
    this.$nextTick(() => {
            // 获取img图片URL
            let imgs = document
              .getElementsByClassName("content-text")[0]
              .getElementsByTagName("img");

            for (let i = 0; i < imgs.length; i++) {
              this.imgsList.push(imgs[i].src);
              imgs[i].addEventListener("click", () => {
                this.startPosition = i;
              });
            }
        });

}

---

总结

因为无法控制返回的字符串，所以通过操作DOM元素来获取元素和属性，并且遍历后添加监听事件。