Становятся ли элементы дерева DOM с идентификаторами глобальными переменными?
Работая над идеей простой оболочки HTMLElement, я наткнулся на следующее для Internet Explorer и Chrome :
Для данного HTMLElement с идентификатором в дереве DOM можно извлечь div используя его идентификатор в качестве имени переменной. Таким образом, для div типа
some text
в Internet Explorer 8 и Chrome вы можете сделать:
alert(example.innerHTML); //=> 'some text'
или
alert(window['example'].innerHTML); //=> 'some text'
Итак, значит ли это , что каждый элемент в дереве DOM преобразуется к переменной в глобальном пространстве имен? Означает ли это также, что можно использовать это в качестве замены для метода getElementById в этих браузерах?
2 ответа
Предполагается, что «именованные элементы» будут добавлены как видимые свойства объекта документа . Это действительно плохая идея, поскольку она позволяет именам элементов конфликтовать с реальными свойствами документа .
IE усугубил ситуацию, добавив также именованные элементы в качестве свойств объекта window . Это вдвойне плохо, поскольку теперь вам нужно избегать именования своих элементов после любого члена либо документа , либо объекта окна , который вам (или любому другому библиотечному коду в вашем проекте) может понадобиться. использовать.
Это также означает, что эти элементы отображаются как глобальные переменные. К счастью, в этом случае любые настоящие глобальные объявления var или function в вашем коде затеняют их, поэтому вам не нужно так сильно беспокоиться об именовании здесь, но если вы попытаетесь сделать присвоение глобальной переменной с конфликтующим именем и вы забыли объявить ее var , вы получите ошибку в IE, поскольку он пытается присвоить значение самому элементу.
Обычно считается плохой практикой опускать var , а также полагаться на то, что именованные элементы будут видны в окне или как глобальные объекты. Придерживайтесь document.getElementById , который более широко поддерживается и менее неоднозначен.Вы можете написать тривиальную функцию-оболочку с более коротким именем, если вам не нравится печатать. В любом случае нет смысла использовать кеш поиска по идентификатору к элементу, потому что браузеры обычно оптимизируют вызов getElementById , чтобы в любом случае использовать быстрый поиск; все, что вы получаете, это проблемы, когда элементы меняются id или добавляются / удаляются из документа.
Opera скопировала IE, затем присоединился WebKit, и теперь как ранее нестандартная практика размещения именованных элементов в свойствах документа , так и ранее использовавшаяся только для IE практика размещения их в окне стандартизированы HTML5, чей подход состоит в том, чтобы задокументировать и стандартизировать каждую ужасную практику, навязываемую нам авторами браузеров, навсегда сделав их частью Интернета. Так что Firefox 4 также будет поддерживать это.
Что такое «именованные элементы»? Все, что имеет id , и все, что имеет имя , используется для «идентификации»: то есть формы, изображения, привязки и некоторые другие, но не другие несвязанные экземпляры Атрибут name , например имена элементов управления в полях ввода формы, имена параметров в или тип метаданных в . «Идентифицирующих» имен следует избегать в пользу id .
В таких случаях следует придерживаться getElementById () , например:
document.getElementById('example').innerHTML
IE любит смешивать элементы с именем и Атрибуты ID в глобальном пространстве имен, поэтому лучше четко указать, что вы пытаетесь получить.