TLDR : consulte HTML de ejemplo. La primera llamada a console.log muestra un conjunto de resultset vacío. Sé cómo solucionar esto, pero ¿por qué sucede esto? Cromo (101.0.4951.54) / Borde (101.0.1210.32)
Me encontré con el siguiente problema: al llamar a getElementsByClassName con un nombre que distingue entre mayúsculas y minúsculas ( inputStartState ) en un contenedor que tiene un hijo directo con dicho nombre de clase, el resultado está vacío.
Sin embargo: esto solo ocurre cuando el elemento se agregó mediante un elemento de plantilla Y se adjuntó un detector de eventos a dicho elemento ANTES de insertar la plantilla en el DOM.
Esto sucede en Chrome (101.0.4951.54) y Edge (101.0.1210.32), pero FireFox (100.0) no se ve afectado.
Ejemplo:
<html> <body> <div id="tester"></div> <template id="testTemplate"> <div class="test"><input class="inputStartState"></div> </template> <script type="text/javascript"> (function() { var container = document.getElementById("tester"); container.innerHTML = ""; var template = document.getElementById("testTemplate"); var clone = template.content.cloneNode(true); var root = clone.firstElementChild; // remove the line below line and it will work just fine - WHY? root.getElementsByClassName("inputStartState")[0].onblur = function() { console.log("Blurrrrr"); } container.append(clone); var el = document.getElementsByClassName("test")[0]; console.log("Direct parent, with case: ", el.getElementsByClassName("inputStartState")); console.log("Direct parent, lower case: ",el.getElementsByClassName("inputstartstate")); el = document.getElementById("tester"); console.log("Parent's parent, with case: ",el.getElementsByClassName("inputStartState")); console.log("Parent's parent, lower case: ", el.getElementsByClassName("inputstartstate")); })(); </script> </body> </html>La ejecución de este fragmento de secuencia de comandos produce el siguiente resultado en la consola
Cromo (101.0.4951.54) / Borde (101.0.1210.32)
Padre directo, con mayúsculas y minúsculas: HTMLCollection []
Padre directo, minúsculas: HTMLCollection [input.inputstartstate]
Padre del padre, con mayúsculas y minúsculas: HTMLCollection [input.inputstartstate]
Padre del padre, minúsculas: HTMLCollection [input.inputstartstate]
La solución fácil es adjuntar el evento después de insertar la plantilla en el DOM. Tengo más curiosidad por saber POR QUÉ hacerlo de esta manera causa este error extraño y muy específico.
var testContainer = document.querySelector('#test'); var childNodeByClass = testContainer.querySelector('.my-class');