Mi problema parece ser bastante similar a este problema: Document.querySelector devuelve un valor nulo hasta que el elemento se inspecciona con DevTools , sin embargo, hay algunas diferencias significativas que son bastante confusas y sugieren que el problema puede ser diferente.

Estoy tratando de escribir un código que reemplace el texto en el cuadro de entrada en Google Chat, así que estoy usando document.querySelector. El campo de entrada que necesito es en realidad un div con contenteditable=true , por lo que tengo el siguiente código:

document.querySelector('div[contenteditable]');

Este código devuelve un valor nulo en la consola del navegador inicialmente hasta que se hace clic en el elemento en el inspector (al hacer clic en el elemento en el inspector y usar el cursor del inspector se obtiene el mismo resultado). El elemento existe claramente, ya que puedo escribir texto en él, y el inspector muestra que existe con todas las propiedades que estoy consultando (incluso antes de hacer clic en él en el inspector), a pesar de que la consulta devuelve un valor nulo. Al hacer clic en el elemento con el inspector, esto se solucionará de inmediato.

Además (no estoy seguro de si esto es relevante, pero parece que puede sugerir algo sobre la naturaleza del problema), incluso una vez que se hace clic en el elemento en el inspector para que la consulta devuelva un elemento, los resultados de esa consulta no se puede almacenar en una variable.