无法解析HTMLCollection列表

Question

我正试图使用javascript从网站上抓取一些链接。在下面的HTML中，我在"a"标记中有一些链接。我正在使用以下JS。

问题是我无法从myChildList中获取链接。

当我console.log myDownloadDiv时，它会将输出显示为对象HTMLElement。当我console.log myChildList(即HTMLElement的子级(时，我得到了一个类似于HTMLCollection的东西[a.dropdown item.disabled]，其中长度为2，包含锚标记和它们的所有属性以及链接。

当我想使用循环来console.log所有元素时，它只显示一个元素，输出如下：

<a class="dropdown-item disabled"></a>

我不明白我在解析HTMLCollectionList时是否做错了什么。

var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}

<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>

编辑：

我尝试了解决方案。它们在片段中工作得很好，但在我试图抓取的网站上却不起作用。

Answer 1

您的循环似乎可以工作。

也许你是指这个

const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href);
console.log(links);

<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>

这是一个书签

javascript:(function() { const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href); console.log(links))()

Answer 2

您的代码是正确的，并且在我的机器上正常工作，我认为您的控制台对象有问题。

请尝试删除此导入https://static.lalaping.com/online.js?ver=2.0.0:formatted我怀疑控制台对象在那里被覆盖了。

你可以在你的网站上验证这一点，只需在浏览器控制台中运行以下命令：

// Restore console object:
var i = document.createElement('iframe');
i.style.display = 'none';
document.body.appendChild(i);
window.console = i.contentWindow.console;
// Run your code:
var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}