无法解析HTMLCollection列表

Question

我正在尝试使用javascript从一个站点中获取一些链接。在下面的HTML中，我在'a‘标签中有一些链接。我正在使用下面的JS。

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

当我使用console.log myDownloadDiv时，它会将输出显示为HTMLElement对象。当我console.log myChildList (即HTMLElement的子级)时，我得到了类似于HTMLCollection a.下拉项目的内容，其中长度为2，同时带有锚标记，并在其中包含所有属性和链接。

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

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

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

​

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);
}