Por favor revise este JSFiddle.

El <div id="wp-post_content-editor-container" ..> en la línea 1 y <textarea class="wp-editor-area input-text-area" ..></textarea> en la línea 108 son los únicos Elemento HTML que puedo seleccionar (con document.querySelector() o document.getElementById() ). El resto me da null .

¿Porqué es eso? ¿Y cómo puedo obtener el elemento HTML de TinyMCE?

Mi objetivo es establecer un detector de eventos en un elemento dentro de la etiqueta <iframe> en la línea 8.

ACTUALIZAR:

Uso este comando para seleccionar el elemento HTML:

 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);

Como puede ver, imprimo el resultado en la consola, pero esto es lo que obtuve:

Cuando selecciono el <div id="mceu_7" ..> me da null .

Mi objetivo es obtener el body[id="tinymce"] > p dentro de la etiqueta <iframe> . Puede verlo en jsFiddle que adjunté en la línea 97 . Y luego ponga un detector de eventos para contadores de palabras.

 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; }); }

Pero como ni siquiera puedo seleccionar el #mceu_7 , no puedo seleccionar el elemento más profundo que eso. Me da null .