如何使用jQuery获取RSS中的<ht:picture_source>标签元素

无法获取目标节点有四个核心原因：

• 带命名空间前缀（ht:）的XML标签不能直接用ht:picture作为jQuery选择器：冒号是jQuery选择器的保留特殊字符，直接写会被识别为伪类语法，无法匹配到对应节点；如果用text类型接收返回值再直接传入$()，jQuery会用HTML解析器处理内容，会丢失XML命名空间的标签信息。
• 代码里目标节点名写错：你要获取的是ht:picture_source节点，实际代码里找的是ht:picture，匹配目标不对。
• 直接从浏览器前端发起对Google Trends RSS接口的请求会触发跨域（CORS）限制，未做代理的情况下请求本身就无法正常拿到返回内容。
• 循环逻辑有问题：索引从1开始计数，会漏掉第一个节点，手动维护索引很容易出现边界错误。

按照以下步骤调整代码即可正常获取内容：

• 把ajax的dataType参数从text改成xml，让jQuery调用浏览器内置XML解析器处理返回内容，正确识别命名空间节点。
• 选择带冒号的节点时，用双反斜杠转义冒号，写法为'ht\\:picture_source'；如果转义后还是匹配不到，可以用节点名过滤的方式兜底。
• 不要手动写for循环维护索引，直接用jQuery的each方法遍历匹配到的节点列表，避免索引错位。
• 前端请求需要配置后端代理转发该RSS接口地址，解决跨域问题，不要直接在前端调用第三方跨域接口。

调整后的可运行参考代码：

$(".trigger").on("click",function() {
    $.ajax({
         // 替换为你自己的后端代理地址，直接填Google原地址会触发跨域
         url: "/proxy/google-trends-rss",
         dataType: 'xml',
         success: function(xmlData) {
              // 转义冒号匹配目标节点
              let $sourceNodes = $(xmlData).find('ht\\:picture_source');
              
              // 兜底匹配方案：如果上面的选择器匹配不到就放开下面这段注释
              // $sourceNodes = $(xmlData).find('*').filter(function() {
              //   return this.nodeName.toLowerCase() === 'ht:picture_source';
              // });

              $sourceNodes.each(function(i, el) {
                  const imgSourceUrl = $(el).text();
                  console.log(imgSourceUrl);
              });
         }
    });
});

本地调试临时测试可以给浏览器开启跨域禁用模式临时绕过CORS限制，正式上线必须走后端代理，否则所有用户访问都会出现跨域报错。

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