Здравствуйте! Сегодня я хочу поделиться результатами недавних исследований DOM-объектов в JavaScript.
Смысл тестов в том, чтобы увидеть, какая же реальная структура некоторых стандартизированных W3 объектов, ведь каждый движок, несмотря на соответствие стандарту, имеет свои отличия, использование которых порой помогает решить поставленную задачу быстрее, нежели в других браузерах, или вообще открывает такой путь решения, который невозможен в остальных движках.
Microsoft Internet Explorer 9RC (даёт возможность тестировать IE8, IE7, а также режим совместимости), IETester 0.4.7 (даёт возможность тестировать версии IE6, IE5.5), Mozilla Firefox 3.6.13, Google Chrome 9.0.597.98, Apple Safari 5.0.7533.16, Opera 11.01.
Прошу прощения, что не затрагивал более старые версии остальных (кроме IE) браузеров.
Вычисление наличия указанных свойств определялось следующим кодом:
где TARGET — целевой объект, p[i] — текущее свойство.
Возьмём, например, ставший популярным интерфейс Drag'n'Drop. В «самом лучшем в мире» браузере (IE) он был реализован только с восьмой версии, в то время, как webkit-овцы и Firefox уже поддерживали его. В таблице, которая будет дальше, это можно увидеть по наличию свойств ondrag-. До недавнего времени я делал этот интерфейс без использования этих свойств, так как не знал о них. Сейчас у меня есть возможность пересмотреть данное решение и реализовать всё ближе к стандарту.
А знаете ли вы, что такое document.execCommand и что этот метод поддерживается всеми протестироваными браузерами? Если кто не знает: это функция запуска команды текстового редактора (rich text editor) браузера, который был перенят у Microsoft и реализован во всех браузерах. Например, до этого времени я был уверен, что что-то типа текстового редактора можно сделать исключительно используя только выделения и функции работы с кареткой. Снова же есть повод поменять точку зрения.
Это далеко не единственные примеры поддержки тех или иных свойств.
Тест я провёл на таких объектах, как window, document и document.body.
window — как глобальный объект, со своим множеством полезных функций
document — как корень всех элементов страницы
document.body — как представитель одного из элементов (типа Element) + исторически сложилось, что он обладает более широким функционалом в сравнении с другими узлами (наличие onload, onunload и др.)
К сожалению, нет возможности отобразить результаты здесь (очень большой объем данных), поэтому придётся воспользоваться внешними ссылками.
Поддержка свойств window
Поддержка свойств document
Поддержка свойств document.body
Firefox и Opera не имеют предопределённых (заранее установленных в null) свойств «on-» обработчиков событий. Они всегда возвращают false. Для объекта window я сам заполнил эти обработчики согласно документации (однако в ней указаны далеко не все, которые поддерживаются, например, window.ondblclick не указан), но для остальных — это слишком долгий процесс.
Надеюсь, что статья немало кому пригодится, особенно начинающим скриптерам, ведь в этом случае, например, не понадобится специально скачивать тот или иной браузер, чтобы посмотреть поддержку того или иного свойства. Буду рад, если вы будете присылать результаты для других браузеров или их версий (для этого здесь есть мини-тесты), а также исправлять меня, если я где-то ошибся (возможно, даже в коде определения наличия свойства).
Также буду благодарен тем, кому понравилась статья и кто мог бы выслать мне за неё инвайт =).
Спасибо.
Смысл тестов в том, чтобы увидеть, какая же реальная структура некоторых стандартизированных W3 объектов, ведь каждый движок, несмотря на соответствие стандарту, имеет свои отличия, использование которых порой помогает решить поставленную задачу быстрее, нежели в других браузерах, или вообще открывает такой путь решения, который невозможен в остальных движках.
Инструментальная база
Microsoft Internet Explorer 9RC (даёт возможность тестировать IE8, IE7, а также режим совместимости), IETester 0.4.7 (даёт возможность тестировать версии IE6, IE5.5), Mozilla Firefox 3.6.13, Google Chrome 9.0.597.98, Apple Safari 5.0.7533.16, Opera 11.01.
Прошу прощения, что не затрагивал более старые версии остальных (кроме IE) браузеров.
Вычисление наличия указанных свойств определялось следующим кодом:
(typeof TARGET[p[i]]!="undefined")||(TARGET.hasOwnProperty(p[i]))||(TARGET[p[i]]===null)
где TARGET — целевой объект, p[i] — текущее свойство.
Немного теории
Возьмём, например, ставший популярным интерфейс Drag'n'Drop. В «самом лучшем в мире» браузере (IE) он был реализован только с восьмой версии, в то время, как webkit-овцы и Firefox уже поддерживали его. В таблице, которая будет дальше, это можно увидеть по наличию свойств ondrag-. До недавнего времени я делал этот интерфейс без использования этих свойств, так как не знал о них. Сейчас у меня есть возможность пересмотреть данное решение и реализовать всё ближе к стандарту.
А знаете ли вы, что такое document.execCommand и что этот метод поддерживается всеми протестироваными браузерами? Если кто не знает: это функция запуска команды текстового редактора (rich text editor) браузера, который был перенят у Microsoft и реализован во всех браузерах. Например, до этого времени я был уверен, что что-то типа текстового редактора можно сделать исключительно используя только выделения и функции работы с кареткой. Снова же есть повод поменять точку зрения.
Это далеко не единственные примеры поддержки тех или иных свойств.
Объектная база
Тест я провёл на таких объектах, как window, document и document.body.
window — как глобальный объект, со своим множеством полезных функций
document — как корень всех элементов страницы
document.body — как представитель одного из элементов (типа Element) + исторически сложилось, что он обладает более широким функционалом в сравнении с другими узлами (наличие onload, onunload и др.)
К сожалению, нет возможности отобразить результаты здесь (очень большой объем данных), поэтому придётся воспользоваться внешними ссылками.
Результат: window
Поддержка свойств window
Результат: document
Поддержка свойств document
Результат: document.body
Поддержка свойств document.body
Замечания
Firefox и Opera не имеют предопределённых (заранее установленных в null) свойств «on-» обработчиков событий. Они всегда возвращают false. Для объекта window я сам заполнил эти обработчики согласно документации (однако в ней указаны далеко не все, которые поддерживаются, например, window.ondblclick не указан), но для остальных — это слишком долгий процесс.
Пожелания
Надеюсь, что статья немало кому пригодится, особенно начинающим скриптерам, ведь в этом случае, например, не понадобится специально скачивать тот или иной браузер, чтобы посмотреть поддержку того или иного свойства. Буду рад, если вы будете присылать результаты для других браузеров или их версий (для этого здесь есть мини-тесты), а также исправлять меня, если я где-то ошибся (возможно, даже в коде определения наличия свойства).
Также буду благодарен тем, кому понравилась статья и кто мог бы выслать мне за неё инвайт =).
Спасибо.