0
141
Visualizaçõesjavascript DOM fuera de sincronización?
Estoy jugando con JavaScript y DOM para una clase (de escuela secundaria) que estoy enseñando. Enfatizando que los estudiantes usan console.log para diagnósticos. Sin embargo, al usarlo, encuentro que los valores recuperados del DOM no están sincronizados con la interfaz de usuario.
En el SSCE a continuación, cuando se hace clic en el elemento LI, la primera vez debe registrar que el estilo es "color:red;", pero dice que el estilo es "text-decoration:line-through;". Agregué la alerta () para dar tiempo a que termine cualquier cosa asíncrona pero no alegría.
Si elimino la cláusula if( isOn ), los atributos se imprimen como se esperaba y, después del primer clic, los atributos también se imprimen como se esperaba.
Supongo que hay algo de sincronización que debe suceder, pero no estoy seguro de qué puede ser...
var theLi = document.getElementById("here"); theLi.addEventListener("click", crossOff); theLi.setAttribute("style", "color:red;"); theLi.setAttribute("crossed", "off"); function crossOff(element) { var isOn = this.getAttribute("crossed") == "on"; var attrs = this.attributes; for (const attr of attrs) { console.log(attr); } alert("huh??"); if (isOn) { this.setAttribute("style", "text-decoration: none;"); this.setAttribute("crossed", "off"); } else { this.setAttribute("style", "text-decoration: line-through;"); this.setAttribute("crossed", "on"); } } //Write function crossOff here. <!DOCTYPE html> <html> <body> <h3>To Do List:</h3> <ul> <li id=here>Eat</li> </ul> <script> </script> </body> </html>1 Respostas
Responde à pergunta0
El problema sería que está registrando nodos de atributos, que todavía están vinculados al DOM. Se sabe que la console genera su salida de forma asincrónica , así como también muestra los elementos DOM en una representación "fácil de usar". ¡Observe que incluso puede editarlos como en el inspector DOM (panel "Elementos")!
Esto se vuelve más claro cuando usa console.dir en su lugar y expande explícitamente las propiedades del objeto:
En su caso particular, no registre el nodo de atributo sino su contenido, como el nombre y el valor.