这两个HTMLCollection之间有什么区别？

Question

我正在尝试收集所有在此页面上具有评分的产品的评分：https://www.theluxelens.com/pages/photoshop-overlays。虽然我可以通过下面的代码在自己的浏览器（Chrome）中运行，但它不能在页面本身上运行。

但是，它能够获得具有评级的元素，因为第一个console.log语句返回这些元素。

  var ratingsElements = document.getElementsByClassName("spr-badge");
  console.log(ratingsElements);
  var nonZeroRatings = [];
  for(var i = 0; i < ratingsElements.length ; i++){
    var rating = ratingsElements[i].getAttribute("data-rating");
    console.log(rating);
    if(rating != "0.0") {
      nonZeroRatings.push(rating)
    } 
  }
  console.log("logging the ratings...");
  console.log(nonZeroRatings); 

在我自己的控制台中运行以下代码时，与页面本身相比，返回的内容似乎略有不同。从浏览器控制台运行时，代码中的第一个console.log语句返回的HTMLCollection略有不同-我相信，这种区别是为什么从页面本身运行时代码无法正常工作的原因，但我没有不知道为什么会如此。该代码有效，如您所见，它提供了数组中具有这些产品的产品的等级（非零等级）：

VS。当从页面运行相同的代码时，请注意返回的HTMLCollection略有不同：

这是页面上的完整脚本标记：

<script type="text/javascript">

window.onload = function () {

  var ratingsElements = document.getElementsByClassName("spr-badge");
  console.log(ratingsElements);
  var nonZeroRatings = [];
  for(var i = 0; i < ratingsElements.length ; i++){
    var rating = ratingsElements[i].getAttribute("data-rating");
    console.log(rating);
    if(rating != "0.0") {
      nonZeroRatings.push(rating)
    } 
  }
  console.log("logging the ratings...");
  console.log(nonZeroRatings); 
};

</script>

感谢您的任何见解。如果有帮助，这是一个Shopify网站。

Answer 1

当您在页面上记录某些内容时，它基本上会记录一个参考，直到开发人员查看控制台条目后，这些参考值才被填写。您可能会在日志条目中注意到该信息图标旁边的小信息图标，如果您悬停/单击该图标，它会向您指出。在哪里，就像从控制台运行时一样，在这种情况下，它决定立即将收集数据提取并记录下来。

在某些情况下，这就是运行时执行与控制台中开发人员意图之间的区别。同样的概念也适用于其他时间，我不知道所有这些都正确。出现的信息图标很好地表明了该条目最初是参考，而不是完整的数据副本。