Please check this JSFiddle.

The <div id="wp-post_content-editor-container" ..> on line 1 and <textarea class="wp-editor-area input-text-area" ..></textarea> on line 108 are the only HTML element I can select (with document.querySelector() or document.getElementById()). The rest give me null .

Why is that? And how can I get the HTML element from TinyMCE?

My goal is to set an event listener in an element inside the <iframe> tag on line 8.

UPDATE:

I use this command to select the HTML element:

let divContentEditor = document.querySelector('#wp-post_content-editor-container');
let divMceu7 = document.querySelector('#mceu_7');
            
console.log('prints the html element');
console.log(divContentEditor);
console.log(divMceu7);

As you can see I print the result on the console, but here is what I got:

When I select the <div id="mceu_7" ..> it's give me null.

My goal is actually to get the element body[id="tinymce"] > p inside the <iframe> tag. You can see it on jsFiddle that I attached on line 97. And then put an event listener for word counters.

const inputTextArea = document.querySelector('body[id="tinymce"] > p');
const wordCount = document.getElementById("word-counter"); // I put this element right below the tinyMCE text area
if (textArea && wordCount) {
    inputTextArea.addEventListener('input', () => {
        const txt = inputTextArea.value.trim();
        wordCount.textContent = txt.split(/\s+/).filter((item) => item).length;
    });
}

But since I can't even select the #mceu_7, I can't select the element deeper than that. It gives me null.