javascript - 这两个 HTMLCollections 有什么区别？

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

当您从页面记录某些内容时，它基本上会记录一个引用，在开发人员查看控制台条目之前，该引用的值不会被填充。您可能会注意到日志条目中它旁边的小信息图标，如果您将鼠标悬停/单击它，它应该向您指示这一点。在这种情况下，当您从控制台运行它时，它会决定立即提取收集数据并记录它。

这就是某些情况下控制台中运行时执行和开发人员意图之间的差异。同样的概念也适用于其他时候，我不知道所有这些。显示的信息图标很好地表明该条目最初是引用而不是完整的数据副本。