javascript - remove - getElementById falla en una ID muy específica que está definitivamente en el árbol DOM en IE 11, posiblemente Edge, ¿por qué?
javascript remove dom element (1)
TL; DR
Parece que hay cadenas específicas que devuelven el borde nulo si intenta seleccionarlas, hay 3 cadenas que no se pueden seleccionar en este violín: https://jsfiddle.net/cogwrudx/4/
He realizado pruebas de 1273 a 1290 ids y solo he encontrado 3, pero supongo que podría haber más, no sé por qué esas cadenas tan importantes que edge no permite buscarlas.
Origen
No puedo comentar, pero esto realmente me molestó, así que tuve que hacer más pruebas, y parece que no importa qué cambios hagas en esta cadena funcionará, pero NO funcionará para esta cadena exacta.
Agregar / eliminar cualquier letra / número funcionará. Cambiar el último número antes del subrayado a 2 en lugar de 1 también funcionará. De hecho, cambiar cualquier número a un número diferente funciona.
Parece que a Edge no le gusta esa cadena específica por una razón y realmente quiero saber por qué.
EDITAR 1
Después de hacer algunas pruebas más básicas, he ejecutado el siguiente violín: https://jsfiddle.net/cogwrudx/4/
Como se puede ver, después de ejecutarlo y ver la consola, hay 2 ID más que no encuentra:
not found: extTabsBodyEleFile1273351781_renderTo
not found: extTabsBodyEleFile1273451781_renderTo
not found: extTabsBodyEleFile1273551781_renderTo
Entonces, a partir de esto, creo que no hay un patrón obvio que evitar como lo sugieren otros, sino una serie de cadenas muy específica para buscar, como si intentara establecer las mismas cadenas que las clases, no funcionará tan bien.
Para tu información
Estaba probando esto en el navegador Edge en Windows 10, y no en IE11.
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134
En Microsoft IE y (según los comentarios) Edge, getElementById() en un ID que es exactamente "extTabsBodyEleFile1273551781_renderTo" falla.
<!DOCTYPE HTML>
<html>
<body>
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
</body>
</html>
Esta identificación fue generada automáticamente. Cambiar la identificación de alguna manera soluciona el problema. Obtener el padre del div y listar sus nodos secundarios también incluye el div.
El error podría reproducirse en IE 11.0.9600.19155 y 11.0.9600.18538, pero funcionó en otra máquina con IE 11 ... 19155 sin problemas.
El error también se puede reproducir si abre la consola del desarrollador en un sitio aleatorio, cambia el ID de cualquier elemento en el explorador DOM al ID anterior y luego intenta obtener ese elemento mediante document.getElementById(''extTabsBodyEleFile1273551781_renderTo'')
Me doy cuenta de que se trata de un error de Edge y corregirlo solo significaría cambiar la ID. Mi pregunta es por qué sucede, por qué no sucedió en una instancia de Edge (no pude encontrar diferencias de configuración) y cómo pude generar la ID para garantizar que no vuelva a suceder. Es fácil cambiarlo en este lugar, pero sin saber por qué sucedió, podría volver a suceder.
¿Existe alguna combinación conocida de hash o número que se supone que no tiene una ID? ¿Es una configuración heredada que potencialmente podría desactivar usando etiquetas meta?
Espero que esta pregunta no sea demasiado inespecífica para SO - La búsqueda resultó infructuosa debido a la gran cantidad de preguntas relacionadas con getElementById.
console.log(document.getElementById(''extTabsBodyEleFile1273551781_renderTo''));
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
Actualizar:
Parece que la identificación falla en un asunto insensible:
extTabsBodyEleFile1273551781_renderTo
exttabsbodyelefile1273551781_renderto
EXTTABSBODYELEFILE1273551781_RENDERTO
ExttAbsbOdyELEfILE1273551781_rEndErtO
Todos causan el error.
Actualizar:
La consola de desarrolladores de IE parece estar al menos involucrada en el error. Al abrir una página HTML de prueba que muestra el resultado de intentar recuperar un elemento con ese ID dentro de sí mismo en lugar de registrarlo en la consola, funciona como se esperaba si IE se iniciaba con la consola cerrada, hasta que la consola se abre y la página se actualiza un par (1-5) de veces, después de lo cual el error aparece nuevamente y persiste hasta que IE se cierra y se vuelve a abrir. Cerrar la consola del desarrollador después de que apareciera el error parece no tener efecto.
HTML de prueba está alojado en netlify , código HTML:
<!DOCTYPE HTML>
<html>
<head>
<style>
table, th, td {border: 1px solid black;border-collapse: collapse;}
th, td {padding: 15px;}
</style>
</head>
<body>
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
<div><p id="testresult"></p></div>
<script>
var testresults = document.getElementById(''testresult'');
var time = new Date().getTime();
testresults.innerHTML = "<h3>testresults:</h3><br><table><tr><th>ID</th><th>Result</th><th>Time</th></tr>" +
''<tr><td>extTabsBodyEleFile1273551781_renderTo: '' + "</td><td>" + document.getElementById(''extTabsBodyEleFile1273551781_renderTo'') + "</td><td>" + time + "</td></tr>" +
''<tr><td>extTabsBodyEleFile1273551781_renderTo through querySelector: '' + "</td><td>" + document.querySelector(''*[id="extTabsBodyEleFile1273551781_renderTo"]'') + "</td><td>" + time + "</td></tr>" +
''</table>'';
</script>
</body>
</html>