IT技术 - 即使在呈现 DOM 之后，HTML 集合长度也是 0 - 吾爱随笔录

我正在SSR React-based使用NextJS. 渲染 DOM 后，我需要检测视口中的一组元素可见性，一旦它们可见，我就需要做一些事情。现在要实现这一点，我需要引用我在componentDidMount生命周期方法中采用的那组元素，了解由于 DOM 已经完全呈现，我可以将所有元素放在一起并观察它们是否在视口中。

下面的代码用于引用元素集：

componentDidMount() {

    this.imageContainer = document.getElementsByClassName("prod_images");
    console.log('imageContainer -> ', this.imageContainer, 'length ->', 
    this.imageContainer.length, 'type is -> ', typeof this.imageContainer);
}

所以，我得到了一组图像的 HTMLCollection，这些图像存储在 imageContainer 变量中。我在下面做了一个控制台，我在控制台下面得到了：

在上面的 SS 中，我只显示了来自 HTML Collection 对象的 4 个条目，但我正确地得到了所有 141 个。我的问题是我在控制台中将 this.imageContainer.length 设为 0，尽管这些值存在。稍后我使用 this.imageContainer.length 来循环遍历元素，此时该值为 0。

链接 -> Javascript HTML 集合显示为 0 长度解释了这可能是由于当时未加载 DOM 元素的事实，我们应该进行此检查DOMContentLoaded。但我已经在使用 componentDidMount 生命周期方法。那么问题是什么，为什么长度变为 0。它是否与 SSR 有关系？