如何使用JavaScript获取YouTube页面链接关联的图片URL

我目前使用如下JavaScript代码抓取网页中的链接：

function GetTheLinks()
{
 var linksArray = [];
 for(var i = 0; i < document.links.length; i++)
 {
    var link = document.links[i];
      linksArray.push( link.innerHTML );
      linksArray.push( link.innerText );
      linksArray.push( link.href );
  }
  return linksArray;
}

上述代码运行正常。
现在需要获取YouTube页面中与链接关联的图片URL，没找到相关文档，我尝试在原有代码中添加如下语句实现需求：

linksArray.push( link.img );

但该写法没有生效。
YouTube页面中对应链接的img元素结构如下：

<img id="img" class="style-scope yt-img-shadow" alt="" width="168" src="https://i.ytimg.com/vi/qPityOntlS4/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLAQZFtofXXUlC1Ra5EPzJopddMcow">

对应选择器为：

#img

XPath为：

//*[@id="img"]

完整XPath为：

/html/body/ytd-app/div[1]/ytd-page-manager/ytd-watch-flexy/div[5]/div[2]/div/div[3]/ytd-watch-next-secondary-results-renderer/div[2]/ytd-item-section-renderer/div[3]/ytd-compact-video-renderer[2]/div[1]/ytd-thumbnail/a/yt-img-shadow/img

页面结构示例截图

link.img不生效的原因很简单：DOM的<a>元素对象没有名为img的内置属性，直接写当然拿不到值。你需要先在当前遍历到的链接标签内部，查找嵌套的img子元素，再读取它的src属性就能拿到图片地址。

从你给出的页面结构可以看到，YouTube的视频缩略图img是直接嵌套在对应的<a>链接标签内部的，修改后的可运行代码如下：

function GetTheLinks()
{
 var linksArray = [];
 for(var i = 0; i < document.links.length; i++)
 {
    var link = document.links[i];
    linksArray.push( link.innerHTML );
    linksArray.push( link.innerText );
    linksArray.push( link.href );
    // 在当前链接范围内查找嵌套的图片元素
    const relatedImg = link.querySelector('img');
    // 仅当链接下存在图片时，才推入图片地址，避免空值报错
    if (relatedImg) {
      linksArray.push(relatedImg.src);
    }
  }
  return linksArray;
}

几个需要注意的点：

• 不要直接用全局的#img选择器查图片，YouTube页面里有大量id为img的元素，全局查找只会返回第一个匹配的结果，必须限定在当前遍历的link元素范围内查找子元素，才能拿到和当前链接对应的图片
• 页面上不是所有链接都带图片（比如页脚的文字链接、功能按钮链接），加非空判断可以避免代码运行时报错中断
• 如果只想匹配YouTube的视频缩略图，过滤掉其他无关图片，可以把选择器改成link.querySelector('img.yt-img-shadow')，精准匹配YouTube缩略图用的样式类

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