Рубанчик В.Б. |
Лабораторная работа "Использование методов DOM для построения документов " |
|
Лабораторная работа
Тема: "Использование DOM API браузеров для работы с документами"
Цель работы: Ознакомиться с методами построения документов с помощью
программного интерфейса DOM браузеров
Проверка поддержки браузером свойств и методов стандартных объектов
Необходимость проверок
Когда браузер отображает веб-страницу, он конструирует объектную модель документа (Document Object Model). Каждый элемент документа представлен в модели самостоятельным объектом. Спецификация DOM определяет программные интерфейсы, которые предназначены для работы с документом.
Параллельно браузером поддерживаются также глобальные объекты модели BOM, такие как window, которые связаны не с документом, а с функционированием браузера.
Устаревшими, но еще используемыми браузерами, такими как IE8, поддерживаются не все свойства и методы DOM/BOM. А в современных браузерах новые свойства и методы объектов реализуются постепенно и появляются неодновременно. Поэтому гарантировать, что браузер пользователя позволяет полностью использовать современные стандарты, нельзя. Для использования HTML5 это особенно важно.
Чтобы избежать проблем, прежде чем использовать новые возможности, нужно
а) проверить, поддерживаются ли они браузером, и,
б) если не поддерживаются, реализовать обходной вариант (эмуляция).
Методы проверки
Для выполнения проверок используется два основных приема.
1. Если речь идет о глобальных объектах, то проверка состоит в выяснении, доступно ли требуемое свойство. Например, HTML5 Geolocation API дает возможность определить географическое местоположение посетителя сайта и определить его точные координаты, если он зашел со смартфона. Так как для этого используется свойство navigator.geolocation, то проверка выглядит следующим образом.
if(navigator.geolocation) {
alert("Геолокация поддерживается");
} else {
alert("Геолокация не поддерживается");
}
2. Для проверки присутствия некоторого свойства у элемента документа, создается (временный) элемент этого типа и проверяется наличие у него заданного свойства.
Например, если браузер поддерживает тег <video>, то в модели документа будет создан соответствующий объект, обладающий методом canPlayType(). Методы объектов JavaScript являются свойствами объектов. Поэтому проверка может выполняться, как в первом случае. Это часто используется при формировании возвращаемых значений функций-предикатов для опроса наличия свойств.
if(document.createElement('video').canPlayType)
alert("Тег video поддерживается");
При выполнении условного оператора значение выражения в условии if неявно будет преобразовано булевское. Если свойство браузером поддерживается, то значение выражения будет преобразовано в true, а, если не поддерживается, то в false.
Однако в тех случаях, когда результат проверки нужно возвратить из функции как булевское значение, требуется выполнить явное преобразование. Для этого можно применить оператор приведения к булевскому типу Boolean(значение). Но чаще пользуются более короткой записью, основанной на двойном отрицании. Например,
return !!document.createElement('video').canPlayType
Первый оператор отрицания возвращает логическое значение, обратное результату неявного преобразования значения выражения, а второй ставит всё на свои места.
Замечания
1. Метод canPlayType()видео-объекта возвращает признак, может ли браузер проигрывать определенный формат файла.
2. Иногда наличие некоторых свойств можно тестировать с помощью стандартных объектов DOM. Например, для проверки встроенной поддержки свойства firstElementChild (первый дочерний элемент, в отличие от firstChild — первый дочерний узел) можно просто обратиться к свойству корневого элемента документа:
document.documentElement.firstElementChild.
Если свойство firstElementChild браузером поддерживается, а дочерних элементов нет, его значение будет равно null (поддержка есть, нет объекта для ссылки), но не undefined, которое означает, что свойство не поддерживается (не определено).
Библиотека Modernizr
Modernizr это бесплатная JavaScript-библиотека, для проверки поддержки браузером большинства новых возможностей HTML5 и CSS3. Библиотека подключается обычным образом с помощью файла modernizr.min.js (плотно упакованная версия библиотеки, сайт разработчиков — http://modernizr.com/).
При загрузке страницы автоматически создается глобальный объект Modernizr, свойства которого содержат истинностное значение, характеризующее доступность каждой технологии. Например, для поддержки геолокации достаточно выполнить проверку
if (Modernizr.geolocation) { ... }
Эмуляция поддержки
Существуют вспомогательные библиотеки, которые подгружаются на веб-страницы и берут на себя поддержку новых свойств и методов объектной модели в старых моделях браузеров. Они называются web polyfills (полифиллы) или web shims.
Замечание
1. Polyfills в данном случае означает дополнение (fill) браузеров отсутствующей у них функциональностью, и использование для этого многих (poly) техник.
2. В программировании shim — это небольшая библиотека, которая прозрачно (незаметно для пользователя) перехватывает вызовы функций прикладного интерфейса (API), может изменить передаваемые аргументы, сама выполнить операцию или переложить её выполнение на другую функцию. Это часто необходимо, когда происходит обновление API, которое вызывает проблемы совместимости со старым кодом. В этом случае библиотека играет роль тонкого дополнительного программного слоя, прячущего различия.
Примером такой библиотеки является HTML5Shiv, которая с помощью JavaScript обеспечивает возможность в версиях IE до 9-ой применять стили к элементам HTML5, которые старым браузерам неизвестны, а поэтому не управляются стилями.