getElementsByTagName 没有返回所有图像，为什么？答案

【问题标题】：getElementsByTagName is not returning all the images why?getElementsByTagName 没有返回所有图像，为什么？
【发布时间】：2021-03-11 23:20:58
【问题描述】：

我正在尝试从某个网站获取所有 img 元素。我打开 chrome 开发工具控制台并输入以下代码，

var imgs = document.getElementsByTagName("img");
var i;
for (i = 0; i < imgs.length; i++) {
console.log(imgs[i]);
}

是的，代码可以在控制台中运行并返回图像列表，但不完全。我注意到一些 img 元素没有返回。

下图中未重新处理的部分。（链接为here）我真的很想知道为什么这些家伙没有回来。这是为什么？

【问题讨论】：

因为那些不是<img> 元素，那些是带有背景图像的<a>。检查这些元素，您会发现它们类似于 <a style="background:url(...)">
你需要给我们实际的consoe输出...

标签： javascript dom web-crawler

【解决方案1】：

正如我在评论中所说，没有 <img> 元素，那些是带有 css 背景图像的 <a> 元素。

如果您想获取这些图片 url，只需选择 <a> 元素，访问它们的 background-image css 属性并提取 url：

var aElems = document.querySelectorAll(".J_Prop_Color a");
var images = [];

for(var i = 0; i < aElems.length; i++) {
  images.push(aElems[i].style.backgroundImage.replace("url(", "").replace(")", "").replace(/\"/gi, ""))
}

console.log(images);

.replace("url(", "").replace(")", "").replace(/\"/gi, "") 部分用于按照此SO answer 删除周围的url("...")。

注意 1： 生成的 url 似乎是 protocol-relative urls，它们以 // 开头，而不是像 https:// 这样的显式协议，您可能需要在它们前面加上 "https:"在使用它们之前。

注意 2： 生成的 url 是缩略图而不是完整大小的图像，请使用以下替换删除这些 url 的 _(number)x(number).jpg 部分：replace(/_\d+x\d+\.[^.]+$/, "") 以获得完整-大小图片网址：

images.push("https:" + aElems[i]
  .style.backgroundImage
  .replace("url(", "").replace(")", "").replace(/\"/gi, "")
  .replace(/_\d+x\d+\.[^.]+$/, "")
);

【讨论】：

感谢您的评论易卜拉欣。当我尝试这段代码时，我得到了零长度列表。但我明白了其中的逻辑。我会再次尝试解决这个问题！
@JunhoLee 这可能是因为您在填充图像之前运行了那段代码。也许等待文件先加载。
@JunhoLee 哎呀，应该是querySelectorAll 而不是querySelector，我的错，对不起

【解决方案2】：

如果您打开控制台并检查元素，问题就像有人在 cmets 中提到没有图像标签一样，如果您检查控制台，您将看到：一个div。

你想做的：

var imgs = document.getElementsByID(IDVALUES);
var i;
for (i = 0; i < imgs.length; i++) {
console.log(imgs[i]);
}

id 存储在 div id 中，例如 'ks-component-??'

上面的答案很可能不会给你想要的，因为你想要多个图像，你会想要创建一个数组并将相应的元素推送到它。

var img1 = ....
var img2 = etc....
....
let arr = [];
arr.push(img1);
arr.push(img2);
....
for (i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

其中 ... 表示您需要的列表或所有变量

【讨论】：