¿La especificación HTML garantiza que los elementos DOM que aparecen antes de una etiqueta <script> estén presentes antes de que se ejecute el contenido de ese script (y ese script pueda manipularlos)?
Esto funciona en todos los navegadores que he probado, pero no estoy seguro de si es legal:
<main hidden>Hello, world</main> <script type="text/javascript"> document.querySelector('main').hidden = false; // no error thrown </script> Sé que la secuencia de comandos se ejecutará de inmediato, bloqueando el análisis, a menos que tenga los atributos async o defer .
Pero, ¿garantiza el análisis hasta este punto que los elementos anteriores están en el DOM y listos para ser manipulados, o es más seguro esperar a DOMContentLoaded ?
Hasta donde yo sé, se ejecutará justo después de analizar el nodo anterior. Puede usar incluso la función document.write para alimentar el analizador con código.
Como puede probar a continuación, incluso puede cerrar etiquetas. Alimenta directamente la salida de document.write() al analizador.
Foo <script> document.write("<strong>bar</strong>") </script> <em>something <script> document.write("weird</em>") </script> here.Puede acceder al DOM en scripts incluso cuando la carga está en curso, pero personalmente lo evitaría. Como puede ver a continuación, se puede acceder al elemento que aún no se cerró.
This works: <em id="foo">foo</em> <script> document.write(document.getElementById("foo")) </script> <hr /> <em id="unclosed">unclosed element <script> document.write(document.getElementById("unclosed")) </script> </em>Pero evite las secuencias de comandos de ejecución prolongada, porque el analizador (y, por lo tanto, la representación) se detendrá y puede ser desagradable si las secuencias de comandos funcionan durante unos segundos.
En este ejemplo, puede ver que puede ocultar, e incluso eliminar , el elemento incluso justo después de la etiqueta de apertura:
<p id="toHide"> <script> document.getElementById("toHide").remove() </script> This is hidden. </p> This is not hidden.