即使已呈現 DOM，HTML 集合長度仍為 0

Question

我正在使用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 集合顯示為 0 長度解釋了這可能是由於當時未加載 DOM 元素的事實，我們應該在DOMContentLoaded進行此檢查。 但我已經在使用 componentDidMount 生命周期方法。 那么問題是什么，為什么長度會變成 0。它是否與 SSR 有關系？

Answer 1

正如epascarello在評論中所建議的

因為添加這些元素的任何內容都是在您閱讀它們之后進行的。 getElementsByClassName是一個實時 Html 集合，因此當您添加/刪除內容時，它會更新。 控制台中的那個小[i]圖標告訴您它已更新

這是正確的答案並解決了我的問題