Supongamos que obtiene un DOM como nodo de referencia, luego crea e inserta un DOM como nuevo nodo.
Si creo e inserto el nuevo Nodo lo antes posible, ¿DOMContentLoaded es la mejor opción de evento en la situación anterior?
El nodo de referencia no es una imagen, es HTMLnknowElement, como HTMLDivElement, HTMLSpanElement.
Aquí hay un flujo de código de ejemplo.
window.addEventListener("DOMContentLoaded", (event) => { // Below is an example code as pseudo code. // Get a reference DOM. const referenceEl = document.querySelector(".foo .reference-dom"); // Create a new DOM. const newEl = document.createElement(htmlTag); // Insert the new DOM before reference DOM. referenceEl.parentElement.insertBefore(newEl, referenceEl.nextElementSibling) })Si ejecuto el código lo antes posible, ¿DOMContentLoaded es la mejor opción de evento en la situación anterior?
Si desea que el código se ejecute lo antes posible, dados los elementos de los que depende que ya existen en el DOM, la forma más fácil de hacerlo sería colocar su etiqueta <script> justo debajo del elemento final requerido para que se ejecute el script. . Por ejemplo, para .reference-dom , podrías hacer
<div class="reference-dom"> ... </div> <script> const referenceEl = document.querySelector(".foo .reference-dom"); // or const referenceEl = document.currentScript.previousElementSibling; // ... etc Si esa no es una opción, otra vía disponible para usted sería agregar un MutationObserver de subárbol al documento con anticipación (como al comienzo de <body> , y observar los addedNodes para ver si el nodo que está buscando para aparece, pero eso es costoso, excesivo y mucho más difícil de administrar.
Para páginas muy grandes ( ejemplo ), la espera de DOMContentLoaded podría llevar demasiado tiempo, en cuyo caso lo que está haciendo sería una buena idea: agregar funciones esenciales a la aplicación antes de que se active el evento, para garantizar una buena experiencia de usuario. (Sin embargo, si lo que está haciendo es simplemente agregar otra etiqueta al HTML, un mejor enfoque sería usar un motor de plantillas o algo del lado del servidor para que sirva el HTML completo, en lugar de tener que modificarlo cliente- lado a través de JavaScript más tarde)