即使在 DOM 已经渲染之后，HTML 集合长度也是 0答案

【问题标题】：HTML Collection length is 0 even after DOM has been rendered即使在 DOM 已经渲染之后，HTML 集合长度也是 0
【发布时间】：2020-06-21 09:24:06
【问题描述】：

我正在使用NextJS 处理SSR React-based 应用程序。渲染 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 collection showing as 0 length 解释了这可能是由于那时尚未加载 DOM 元素，我们应该在 DOMContentLoaded 中进行检查。但我已经在使用 componentDidMount 生命周期方法。那么问题是什么，为什么长度为 0。它与 SSR 有什么关系吗？

【问题讨论】：

因为添加这些元素的任何内容都是在您阅读它们之后进行的。 getElementsByClassName 是一个实时 Html 集合，因此当您添加/删除内容时，它会更新。控制台中的那个小 [i] 图标告诉您它已更新。
好的。我得到了它。它还说值只是计算出来的。获取所有元素的长度或值的正确方法应该是什么。
为什么需要使用getElementsByClassName是react？你到底想做什么？
需要实现滚动图片的延迟加载。渲染 dom 后，获取图像的引用并检查它们是否在视口中。如果是，则设置它的 src 属性。它在滚动中工作正常的延迟加载部分。如果图像在视口中，则只是在初始渲染而不是滚动时需要检查元素的可见性。为此需要遍历这些值。
stackoverflow.com/questions/26556436/react-after-render-code

标签： javascript html reactjs dom server-side-rendering

【解决方案1】：

正如comment epascarello 所建议的那样

因为添加这些元素的任何内容都是在您阅读它们之后进行的。 getElementsByClassName 是一个实时 Html 集合，因此当您添加/删除内容时，它会更新。控制台中的 [i] 小图标告诉您它已更新

这是正确答案，解决了我的问题

【讨论】：

您应该将此作为评论发布
@phoenixstudio 似乎这原本是一个comment，OP 正试图将其转换为答案......