如何通过JS获取RSS Feed中的图片URL？现有解析代码无法正常取值

• 对<enclosure>节点的取值方式错误：RSS规范中<enclosure>为自闭合空标签，图片URL存储在节点的url属性中，原代码读取节点innerHTML的方式永远拿不到有效地址，会返回空字符串。
• 缺少空值容错：目标RSS源并非所有item都配置了标准enclosure节点，直接调用el.querySelector("enclosure")在节点不存在时会返回null，后续访问属性会直接抛出错误，中断整个列表渲染流程。
• 命名空间节点匹配失效：该RSS源的图片实际存储在media:content这类带命名空间的节点中，直接用包含冒号的选择器查询时，浏览器会将冒号识别为伪类标识，无法匹配到目标节点。

按照图片存储位置的优先级逐级提取地址，全链路加容错处理：

1. 优先读取<enclosure>节点的url属性
2. 匹配带命名空间的media:content节点，读取其url属性（选择器需转义冒号）
3. 若以上位置都无有效图片地址，从description字段的HTML内容中匹配内嵌img标签的src值
4. 全部无匹配时使用兜底占位图

fetch(FEED_URL)
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => {
    const items = data.querySelectorAll("item");
    let html = ``;
    items.forEach(el => {
      let imgUrl = "";
      // 1. 取enclosure属性
      const enclosure = el.querySelector("enclosure");
      if (enclosure) imgUrl = enclosure.getAttribute("url");
      // 2. 取media命名空间内容（选择器转义冒号）
      if (!imgUrl) {
        const mediaContent = el.querySelector("media\\:content");
        if (mediaContent) imgUrl = mediaContent.getAttribute("url");
      }
      // 3. 从描述内容提取内嵌图片
      if (!imgUrl) {
        const descContent = el.querySelector("description")?.innerHTML || "";
        const imgMatch = descContent.match(/<img[^>]+src=["']([^"'>]+)["']/);
        if (imgMatch) imgUrl = imgMatch[1];
      }
      // 兜底默认图
      imgUrl = imgUrl || "默认占位图地址";

      // 统一提取字段加容错，避免空节点报错
      const itemTitle = el.querySelector("title")?.innerHTML || "无内容标题";
      const itemLink = el.querySelector("link")?.innerHTML || "#";
      const itemDesc = el.querySelector("description")?.innerHTML || "";
      const itemDate = el.querySelector("pubDate")?.innerHTML || "";

      html += `
        <div class="card mb-3 text-start position-relative text-dark">
          <div class="row g-0">
            <div class="col-md-4">
              <img src="${imgUrl}" alt="${itemTitle}" class="img-fluid rounded-start">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <div class="card-title h5">${itemTitle}</div>
                <p class="card-text">${itemDesc}</p>
                <p class="card-text"><small class="text-muted">${itemDate}</small></p>
              </div>
            </div>
          </div>
          <a href="${itemLink}" title="${itemTitle}" class="stretched-link" target="_blank" rel="noopener noreferrer"></a>
        </div>
      `;
    });
    document.querySelector('#feed').insertAdjacentHTML("beforeend", html);
  });

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