getElementById завершается ошибкой с очень конкретным идентификатором, который определенно находится в дереве DOM в IE 11, возможно, Edge - почему? - программирование
Подтвердить что ты не робот

getElementById завершается ошибкой с очень конкретным идентификатором, который определенно находится в дереве DOM в IE 11, возможно, Edge - почему?

В Microsoft IE и (согласно комментариям) Edge происходит сбой getElementById() для идентификатора, который является в точности "extTabsBodyEleFile1273551781_renderTo".

<!DOCTYPE HTML>
<html>
    <body>
        <div id="extTabsBodyEleFile1273551781_renderTo"></div>
    </body>
</html>

Этот идентификатор был создан автоматически. Любое изменение идентификатора устраняет проблему. Получение родительского элемента div и перечисление его дочерних узлов также включает в себя div.

Ошибка может быть воспроизведена как в IE 11.0.9600.19155, так и в 11.0.9600.18538, но она работает на другом компьютере с IE 11... 19155 без проблем.

Ошибка также может быть воспроизведена, если вы откроете консоль разработчика на случайном сайте, измените идентификатор любого элемента в DOM-обозревателе на указанный выше идентификатор, а затем попытайтесь получить этот элемент с помощью document.getElementById('extTabsBodyEleFile1273551781_renderTo')

Я понимаю, что это ошибка Edge, и ее исправление будет означать изменение ID. У меня вопрос, почему это происходит, почему это не произошло в одном экземпляре Edge (я не смог найти различия настроек) и как я мог сгенерировать ID, чтобы это больше не повторилось. Это легко изменить в этом месте, но, не зная, почему это произошло, это могло произойти снова.

Есть ли известная комбинация хешей или чисел, которую ID не должен иметь? Это устаревшая настройка, которую я мог бы отключить, используя метатеги?

Я надеюсь, что этот вопрос не слишком специфичен для SO - его поиск оказался бесплодным из-за множества вопросов, связанных с getElementById.

console.log(document.getElementById('extTabsBodyEleFile1273551781_renderTo'));
<div id="extTabsBodyEleFile1273551781_renderTo"></div>
4b9b3361

Ответ 1

TL; DR

Похоже, что есть определенные строки, которые возвращают значение NULL, если вы попытаетесь выбрать их, я обнаружил 3 строки, которые нельзя выбрать в этой скрипке: https://jsfiddle.net/cogwrudx/4/

Я провел тесты с 1273 по 1290 идентификаторов и нашел только 3, но я думаю, что их может быть больше, я не знаю, почему эти строки настолько важны, что edge не позволяет их искать.

происхождения

Я не могу комментировать, но это действительно раздражало меня, поэтому мне пришлось провести еще несколько тестов, и похоже, что независимо от того, какие изменения вы внесете в эту строку, она будет работать, но она НЕ будет работать для этой конкретной строки.

Добавление/удаление любой буквы/цифры будет работать. Изменение последнего числа перед подчеркиванием на 2 вместо 1 также будет работать. Фактически, изменение любого числа на другое работает.

Похоже, ребру не нравится эта конкретная строка по какой-то причине, и я действительно хочу знать, почему.

РЕДАКТИРОВАТЬ 1

После более простого тестирования я запустил следующую скрипку: https://jsfiddle.net/cogwrudx/4/

Как вы можете видеть после запуска и просмотра консоли, есть еще 2 идентификатора, которые он не находит:

not found:  extTabsBodyEleFile1273351781_renderTo
not found:  extTabsBodyEleFile1273451781_renderTo
not found:  extTabsBodyEleFile1273551781_renderTo

Исходя из этого, я думаю, что нет очевидного шаблона, которого следует избегать, как предлагали другие, но есть очень специфические строки для поиска, так как если вы попытаетесь установить те же строки, что и классы, это не сработает.

FYI

Я тестировал это в браузере Edge в Windows 10, а не в IE11.

Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134