这两个 HTMLCollection 之间有什么区别？
发布于2025-01-19 22:36 阅读(788) 评论(0) 点赞(27) 收藏(2)
我正在尝试收集此页面上有评级的所有产品的评级：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 网站，如果这有区别的话。
解决方案
当您从页面记录某些内容时，它基本上会记录一个引用，其中的值在开发人员查看控制台条目之前不会填写。您可能会注意到日志条目旁边的小信息图标，如果您将鼠标悬停/单击它，它应该会向您显示这一点。而当您从控制台运行它时，它会在这种情况下决定立即提取集合数据并记录它。
在某些情况下，这就是运行时执行和控制台中的开发人员意图之间的区别。同样的概念也适用于其他时候，我并不是马上就知道所有情况。显示的信息图标很好地表明该条目最初是引用，而不是完整的数据副本。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/538956/28b628ccfeb8ebaf89ec/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力