'object HTMLCollection' 而不是来自 RSS 的图片 URL

Question

我正在尝试从 wordpress 提要中提取缩略图 URLs 并继续获取 [object HTMLCollection] 而不是缩略图的图像 URL 字符串。我从中提取的提要是：https://harpercollegece.com/feed/。我知道标签名为 media:thumbnail，值存储在 'URL' 中。当运行通过每个 post 时，我找不到在 forEach 循环中引用此图像的正确方法。我已经尝试搜索其他 post 以及 google 几个小时。

var proxy = 'https://api.allorigins.win/raw?url=';
var feeds = [
  'https://harpercollegece.com/feed/',
];

var limit = 10;

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

function strip_tags(string) {
  if ((string === null) || (string === '')) {
    return '';
  } else {
    string = string.toString();
  }
  string = string.replace('<![CDATA[', '');
  string = string.replace(' [&#8230;]]]>', '');
  string = string.replace(/<[^>]*>/g, '');
  string = string.replace(/&lt;[^>]*&gt;/g, '');
  string = string.replace(']]>', '');
  return string;
}

function get_rss(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) {
      return;
    }
    if (xhr.status >= 200 && xhr.status < 300) {
      var response = xhr.responseText;
      var parser = new window.DOMParser();
      var data = parser.parseFromString(response, "text/xml");
      var items = Array.from(data.querySelectorAll("item"));
      var output = '';
      forEach(items, function(index, item) {
        if (index <= limit) {
          var ilink = item.querySelector("link").innerHTML;
          var title = item.querySelector("title").innerHTML;
          var descr = item.querySelector("description").innerHTML;
          var thumb = item.getElementsByTagName("media:thumbnail");
          //console.log(item);
          output +=
          '<div class="ce-blog-slider-well">' +
             '<div class = "ce-blog-thumb">' +
              '<img class="blog-post-img" src="' + thumb + '" alt="Veterans Center Sign">' +
            '</div>' +  
            '<div class = "ce-blog-header">' +
              '<a href="' + ilink + '" target="_blank" rel="noopener">' + strip_tags(title) + '</a>' +
            '</div>' +
            '<div class ="ce-blog-descr">' + strip_tags(descr) + '</div>' +
          '</div>';
        }
      });
      var d1 = document.getElementById('wp-blog-posts');
      d1.insertAdjacentHTML("beforeend", output);  
    }
  };
  xhr.open('GET', url);
  xhr.send();
}

forEach(feeds, function(index, feed) {
  get_rss(proxy + encodeURIComponent(feed));
});

<div class="ce-blog-slider" id="wp-blog-posts"></div>

Answer 1

getElementsByTagName returns 一个 HTML 集合。要获得 URL，您必须使用 [0] 获取该集合中的第一个元素。 URL 存储在一个名为 url 的属性中，一个 la

<media:thumbnail url="https://harpercollegece.files.wordpress.com/2021/01/writing-red-typewriter-typing.jpg" />

从您的 HTMLElement 中获取 url 属性，如下所示：

var thumb = item.getElementsByTagName("media:thumbnail")[0].getAttribute("url");

var proxy = 'https://api.allorigins.win/raw?url=';
var feeds = [
  'https://harpercollegece.com/feed/',
];

var limit = 10;

var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
  }
};

function strip_tags(string) {
  if ((string === null) || (string === '')) {
    return '';
  } else {
    string = string.toString();
  }
  string = string.replace('<![CDATA[', '');
  string = string.replace(' [&#8230;]]]>', '');
  string = string.replace(/<[^>]*>/g, '');
  string = string.replace(/&lt;[^>]*&gt;/g, '');
  string = string.replace(']]>', '');
  return string;
}

function get_rss(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) {
      return;
    }
    if (xhr.status >= 200 && xhr.status < 300) {
      var response = xhr.responseText;
      var parser = new window.DOMParser();
      var data = parser.parseFromString(response, "text/xml");
      var items = Array.from(data.querySelectorAll("item"));
      var output = '';
      forEach(items, function(index, item) {
        if (index <= limit) {
          var ilink = item.querySelector("link").innerHTML;
          var title = item.querySelector("title").innerHTML;
          var descr = item.querySelector("description").innerHTML;
          var thumb = item.getElementsByTagName("media:thumbnail")[0].getAttribute("url");
          //console.log(item);
          output +=
          '<div class="ce-blog-slider-well">' +
             '<div class = "ce-blog-thumb">' +
              '<img class="blog-post-img" src="' + thumb + '" alt="Veterans Center Sign">' +
            '</div>' +  
            '<div class = "ce-blog-header">' +
              '<a href="' + ilink + '" target="_blank" rel="noopener">' + strip_tags(title) + '</a>' +
            '</div>' +
            '<div class ="ce-blog-descr">' + strip_tags(descr) + '</div>' +
          '</div>';
        }
      });
      var d1 = document.getElementById('wp-blog-posts');
      d1.insertAdjacentHTML("beforeend", output);  
    }
  };
  xhr.open('GET', url);
  xhr.send();
}

forEach(feeds, function(index, feed) {
  get_rss(proxy + encodeURIComponent(feed));
});

<div class="ce-blog-slider" id="wp-blog-posts"></div>

'object HTMLCollection' 而不是来自 RSS 的图片 URL

'object HTMLCollection' instead of Image URL from RSS

javascript

rss