HTMLCollection 返回 null

Question

I have already looked at other stackoverflow posts and none of them fix my error.

Trying to get the divs inside the outer div with class name "CodeMirror-code"

I'm building a chrome extension that directly modifies the html content of a specific webpage and when I call

const variable = document.getElementsByClassName('CodeMirror-code');

console.log(variable);

console.log("Length:", variable.length);

the output is: this

Now, when I try to call the first item of HTML collection like

variable.item(0)

this returns undefined or null

Other solutions says that you should surround the code in window.onload function in order for the DOM elements to be loaded in. I did this, and there was no change. Is there any way I can fix this error?

Update: This is what is inside the HTML collection

Answer 1

Surround your code in a set interval function within window.onLoad and add some delay (like 2000 for 2 seconds). The only thing that gives HtML collection null is the loading latency of dom elements. If adding delay is still not helping then try to retrace the parents of your div and see till what point your js code is able to catch the expected div. Then check whether its the problem with load time or scope of the code.