微信小程序如何替代document.getElementsByTagName获取image标签src

微信小程序采用逻辑层、渲染层分离的双线程架构，没有浏览器DOM运行环境，无法使用document.getElementsByTagName这类DOM API直接操作节点，也不推荐任何模拟DOM操作的方案，所有视图更新遵循数据驱动的核心逻辑，具体实现可以根据业务场景选择对应方案：

方案1：直接修改绑定数据源（官方推荐，性能最好） #

小程序WXML里所有动态属性都和Page/Component实例的data做绑定，不需要去WXML里遍历查找标签，直接在逻辑层遍历存储图片地址的数据源，批量替换src值后调用setData更新，视图会自动重新渲染。
常规业务场景的实现代码示例：

Page({
  data: {
    // 所有image的src都来自data中定义的字段
    imgList: [
      { id: 1, src: "https://old-cdn.com/img/1.jpg" },
      { id: 2, src: "https://old-cdn.com/img/2.jpg" }
    ],
    userAvatar: "https://old-cdn.com/avatar/default.png"
  },
  onLoad() {
    // 批量替换所有图片src的域名
    const newImgList = this.data.imgList.map(item => ({
      ...item,
      src: item.src.replace("https://old-cdn.com", "https://new-cdn.com")
    }))
    const newAvatar = this.data.userAvatar.replace("https://old-cdn.com", "https://new-cdn.com")
    // 更新数据后视图自动同步，不需要操作DOM
    this.setData({
      imgList: newImgList,
      userAvatar: newAvatar
    })
  }
})

对应的WXML结构参考：

<view class="banner">
  <image wx:for="{{imgList}}" wx:key="id" src="{{item.src}}" mode="widthFix" />
</view>
<image class="avatar" src="{{userAvatar}}" />

方案2：富文本场景直接替换字符串内容 #

如果image标签存在于富文本内容中（通过rich-text组件渲染），不需要查询节点，直接在渲染前用正则匹配富文本字符串里的所有img标签，替换src属性后再传给组件即可：

// 假设richText是接口返回的包含img标签的富文本字符串
const processedRichText = richText.replace(
  /<img[^>]*src\s*=\s*["']([^"']+)["'][^>]*>/gi,
  (match, originalSrc) => {
    // 自定义src替换逻辑，比如加签名、换域名、加压缩参数
    const replacedSrc = originalSrc.replace("http://", "https://") + "?x-oss-process=compress"
    return match.replace(originalSrc, replacedSrc)
  }
)
this.setData({
  richTextContent: processedRichText
})

方案3：需要查询节点信息时用官方SelectorQuery API #

如果你确实需要获取页面上已有image节点的属性信息（注意：该API只能查询节点信息，无法直接修改节点属性），可以使用小程序官方提供的选择器API，用法和Web的选择器类似，支持标签选择器：

onReady() {
  const query = wx.createSelectorQuery().in(this)
  // 选中页面所有image标签，指定需要返回的属性字段
  query.selectAll("image")
    .fields({
      src: true, // 要求返回src属性
      dataset: true,
      size: true
    }, (nodeList) => {
      // nodeList是所有匹配到的image节点信息数组
      console.log("所有image节点信息", nodeList)
      // 拿到信息后如果需要修改src，还是要回到方案1修改数据源后setData更新
    })
    .exec()
}

注意：不要尝试引入任何Web端的DOM操作类库（比如jQuery、zepto）在小程序里运行，这类库依赖浏览器window/document对象，在小程序环境下完全无法工作。所有视图修改必须走数据驱动的setData流程，强行操作节点会导致渲染异常、性能不达标的问题。

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