Puedo imprimir esto en la consola. Este es el enlace
document.getElementsByClassName('flip-card-back')[0].innerHTMLPero cuando estoy haciendo lo mismo en JS (en una extensión en Firefox) esto no funciona.
console.log(document.getElementsByClassName('flip-card-back')[0].innerHTML) window.addEventListener('load', function () { var eles = document.getElementsByClassName('flip-card-back')[0].innerHTML; console.log(eles); })¿Qué estoy haciendo mal?
Editar: he intentado usar MutationObserver.
De acuerdo con la documentación de MutationOberserver, he intentado usarlo.
// Select the node that will be observed for mutations console.log('test'); const targetNode = document.getElementsByClassName('flip-card-back'); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { // Use traditional 'for loops' for IE 11 for(const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); console.log('test2') // Start observing the target node for configured mutations observer.observe(targetNode, config); // Later, you can stop observing observer.disconnect(); console.log('test3')Test y test2 se imprimen pero test3 nunca se imprime, parece que sigue observando pero nunca obteniendo nada.
No puedo probarlo, pero creo que quieres algo como esto.
En la devolución de llamada, recorra los nodos agregados y verifique la clase que está buscando. Si se trata de una modificación de atributo, verifique si el elemento de destino ahora tiene la clase.
document.getElementById("addcard").addEventListener("click", () => { let newNode = document.createElement("div"); newNode.id = "card"; document.getElementById("foo").appendChild(newNode); }); document.getElementById("addclass").addEventListener("click", () => document.getElementById("card") ?.classList?.add("flip-card-back")); console.log('test'); const targetNode = document.body; // Options for the observer (which mutations to observe) const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] }; // Callback function to execute when mutations are observed const callback = function(mutationsList, observer) { // Use traditional 'for loops' for IE 11 for (const mutation of mutationsList) { if (mutation.type = 'childList') { for (const node of mutation.addedNodes) { if (node?.classList?.includes("flip-card-back")) { alert("flip-card-back node added", node.innerHTML); return; } } } else if (mutation.type == 'attributes') { if (mutation.target.classList.includes("flip[-card-back")) { alert("flip-card-back class added", node.innerHTML); return; } } } } // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); console.log('test2') // Start observing the target node for configured mutations observer.observe(targetNode, config); #foo { height: 50px; width: 50px; background-color: yellow; } #card { height: 20px; width: 20px; background-color: green; } #card.flip-card-back { background-color: red; } <div id="foo"></div> <button id="addcard">Click to add node</button> <button id="addclass">Click to add class</button>¿Eres capaz de usar jQuery? si es asi podrias probar
$(document).ready(function(){ var eles = document.getElementsByClassName('flip-card-back')[0].innerHTML; console.log(eles); })De lo contrario, intente esto
(function() { var eles = document.getElementsByClassName('flip-card-back')[0].innerHTML; console.log(eles); })();Parece que la ventana real está cargada pero no el contenido dentro de ella . Es posible que el navegador tarde un poco más en configurar todos los elementos según el proyecto. El contenido se representa principalmente en el orden en que lo escribió en HTML. Así que recomiendo poner el script después de la etiqueta del cuerpo . ¡Espero que esto explique y solucione tu problema!